I have Google Translate on my page. It looks like a drop-down list, but all other drop-down lists on my page have another style. So I created jQuery function which change Google Translator drop down list styles. This function adds or deletes some style parameters. I'd like to know when I should call this function? In current code I call it after 3 sec. after document.ready

```
  $(document).ready(function () {
      setTimeout(wrapGoogleTranslate, 3000);
  });

```

Current situation is that I hide the Div where Google translate is placed and show it after it's styles are corrected by my function. It means that my page loads, then it wait for 3 seconds, and *then* Google Translate appears with corrected styles.

I'd like to know how I can determine that Google Translate drop-down was loaded and then call my function to change the style. I don't want to make users wait for 3 seconds (maybe in some situations Google Translate would loads more than 3 seconds, then my function would never be executed).
['https://Stackoverflow.com/questions/13383647', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1753077/']
I recently wanted to change "Select Language" to simply "Language", so I also had to run code after Google's code had been executed. Here's how I did it:

**HTML** 

It's important to set Google's `div` to `display:none` -- we'll fade it in with JavaScript so that the user doesn't see the text switching from "Select Language" to "Language".

```
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-35158556-1'}, 'google_translate_element');}</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

```

**JavaScript**

```
function changeLanguageText() {
  if ($('.goog-te-menu-value span:first-child').text() == "Select Language") {    
    $('.goog-te-menu-value span:first-child').html('Language');
    $('#google_translate_element').fadeIn('slow');
  } else {
    setTimeout(changeLanguageText, 50);
  }
}
changeLanguageText();

```
You can do it with pure JavaScript. It says in the W3 docs for the [`onLoad` attribute](http://www.w3schools.com/jsref/event_onload.asp) that you can add an attribute in a HTML element which takes as a parameter, the JavaScript code to be executed when the element has loaded.

Problem is, the attribute is only supported for a few elements which are:-

* `<body>`
* `<frame>`
* `<frameset>`
* `<iframe>`
* `<img>`
* `<input type="image">`
* `<link>`
* `<script>`
* `<style>`

So, I'd recommend going with an `<iframe>` or `<frame`. It should now look something like this:

```
<frame onLoad="wrapGoogleTranslate();" />

```

Or else, you can try this with jQuery:

```
$("div#googleTranslateWrapper").load(function() {
  setTimeout(wrapGoogleTranslate, 3000);
});

```

Here's the documentation for jQuery's [`load` method](http://api.jquery.com/load/)