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