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:

<         


        

Answer 1

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

Answer 2

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

Answer 3

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.