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 had a similar situation where i had to change "Select Language" to just display "Language". Here is my CSS solution:

```
div#google_translate_element{
  display: inline-block;
  vertical-align: top!important;
}

div#google_translate_element *{
  margin: 0px;
  padding: 0px;
  border: none!important;
  display: inline-block;
  vertical-align: top!important;
}

div#google_translate_element .goog-te-gadget-icon{
  display: none;
}

div#google_translate_element .goog-te-menu-value{
  color: #899290;
}

div#google_translate_element .goog-te-menu-value:hover{
  color: #a6747e;
}

div#google_translate_element .goog-te-menu-value *{
  display: none;
}

div#google_translate_element .goog-te-menu-value span:nth-child(3){
  display: inline-block;
  vertical-align: top!important;
}

div#google_translate_element .goog-te-menu-value span:nth-child(3)::after{
  content: "Language"!important;
}

```
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/)