Question

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).

Answer 1

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();