Google Translate Widget - Translation complete callback

Question

I'm using the google translate widget on one of my sites with the following google supplied code:

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

<script>

My problem: The translate runs after the page has loaded but I also have a script that auto sizes my primary navigation elements based on their width.

This runs before the translate has finished so it resizes based on untranslated English labels. Once the translate has changed the navigation wording, the navigation elements need to be resized to fit the newly translated words as they are likely to be different size (width) to the English.

I've tried calling the Google translate code before I run the code to resize the primary navigation but the translate runs asynchronously so my code runs before the translate is complete.

Is there a callback event raised when the translation is complete (or some way to detect when the translation is complete), so I can wait before I attempt to resize the navigation?

Also, I need to run a script AFTER the page has finished translating.

Pictorial

I don't have any example stuff but you could try to add a function call within googleTranslateElementInit..? I.e. function googleTranslateElementInit() { new google.translate.TranslateElement(...); myFuncInvocation(); } – Libbylibeccio

Tried that Eric, same problem with calling google translate before my code. It runs asynchronously so returns from the google.translate.TranslateElement() call immediately (ie before the translation has finished) - I'll update my question – Pictorial

Honestly I'd rather see an example where it runs. What you can do is put a breakpoint in the 'new google.translate..' in webkit and try debugging, and see if you can add handlers or optional default-existing handlers might be invoked. – Libbylibeccio

when googleTranslateElementInit function is executed.. on what event its called.. – Batish

Answer 1

Here's the fix I ended up using:

jQuery(function(){
    firstMenu = $("#nav li:first").text();

    setTimeout(waitNav, 500);
});

function waitNav() {

    if (firstMenu != $('#nav li:first').text()) {

        initNav();
        firstMenu = $('#nav li:first').text();
        setTimeout(waitNav, 500);

    }
    else {
        setTimeout(waitNav, 500);
    }

}

Basically, keep checking if a known piece of text has changed (in this case it's the first item in the navigation block).

If it's changed that means the translator has run, run the code you need to run after the translation (initNav() here).

I keep checking for changes in case the user selects another language.

It's not perfect, but it works for me :-)

Pictorial

Note: in a lot of situations a piece of text (especially menu items) might remain unchanged after translation e.g: "contact" might spell the same in more then just English. Not sure if this trick will work then. – Barrera

Answer 2

You can detect changes like this:

$('#some-translatable-element').bind('DOMSubtreeModified', function() {
  yourCallback();
});

The drawback is that the event is beeing fired multiple times since google translate does multiple changes in the process.

A suggestion is to detect changes on the last element on your page, cause then you know all elements above is translated.

Beseech

Answer 3

$( document ).ready(function() {
    $('#google_translate_element').bind('DOMSubtreeModified', function() {
        var val = $(this);
        var strlang = "" + val[0].innerText + "";
        console.log(strlang); // print your selected language in console
    });
});

Secretariat

You should add some explanation as to what's happening here, and what this code will do – Kyte