Modifying element from google.translate.TranslateElement results

Question

I'm attempting to embed the very convenient Google Translate translate element into a webpage, which is super simple and works great, but I need to change the default text that displays in the resulting HTML:

Having worked with a number of Google APIsand js libraries, I figured this would be no problem as it would almost certainly be configurable, but having looked around for some time I can't find any reference to a property that let's you set this, and documentation in general seems to be pitiful. The basic code is:

<div id="google_translate_element"></div>
<script>
   function googleTranslateElementInit() {
      var translator = new google.translate.TranslateElement({
      pageLanguage: 'en',
      autoDisplay: false,
      multilanguagePage: false,
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
   }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Having dispaired of being able to set this as a property in the when I create the translator, I decided to hack it and use an onDOMNodeInserted listener to just change the resulting HTML once it had loaded into <div id="google_translate_element"></div>. I'm using jQuery here, so my code is:

$(document).ready(function(){
   $('#google_translate_element').bind('DOMNodeInserted', function(event) {
       $('.goog-te-menu-value span:first').html('Translate');
   });
})

And here's where things get interesting. Chrome loads everything perfectly and does the innerHTML substitution beautifully. Internet Explorer (8) ignores the DOMNodeInserted listener altogether and the page loads as if the jQuery function was never called. Firefox (10) appears to load fine (but with no translate element at all) and then freezes, begins gobbling up memory, and crashes.

Any thoughts on how I can get this innerHTML substitution to work? If you're aware of a displayLabel : "Translate"-like property that is of course preferred, but barring that (and a really ugly setTimeout hack) is there any way I can get this to work?

Chapiter

Answer 1

Like you I can't find out how to customize the gadget via init params but it appears possible to write your own customized gadget in HTML then invoke g.translate functionality on it. See http://www.toronto.ca/ (page footer). I'm afraid you will have to do some more digging to see exactly how it's done.

This use of g.translate is also referenced here. Unfortunately the discussion is quite old now but hopefully still relevant.

Plumcot

This may be the approach I end up taking, but all they're doing is redirecting the user to Google Translate's site along with language and url info. If I can I'd prefer to keep folks on my site. In any case, thanks for the assistance – Chapiter

Ben, the following page, right at the bottom, includes a DOMNodeInserted hanlder with some additional safety. It's still not exactly what you're looking for but may offer further insight. code.google.com/p/socialtranslate/source/browse/trunk/… – Plumcot

Answer 2

You can do it using CSS, only it will not change the label when a language is selected.

#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child{display: none;}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before{content: 'Translate'}

Dumfries

This was the simplest method, and didn't cause a jQuery RangeError: Maximum call stack size exceeded error – Levitus

Answer 3

I'm using this code which checks every 3ms if the translate module has been yet loaded into the page; if so, it then updates the text and clears the interval check after.

function cleartimer() {     
    setTimeout(function(){ 
        window.clearInterval(myVar); 
    }, 1000);             
}
function myTimer() {
    if ($('.goog-te-menu-value > span:first-child').length) {
        $('.goog-te-menu-value > span:first-child').html('Translate');
        cleartimer();
    }
}
var myVar = setInterval(function(){ myTimer() }, 300); 

Nevlin