Google Translate Override Select Change Event

I've got a wierd issue:

Translate

Copy

To view all data inside the drop down

$(".goog-te-combo").find("option").each(function () {
    console.log($(this).text() + ", " + $(this).val() + "\n");
});

Solution 2:

I finally solved this by using a reoccuring check on the language. Not the prettiest solution, but it does the job. :)

var firstMenuValue = $("#main-menu li:first").text();

var checkIfTranslated = function () {
    var check = function () {

        if (firstMenuValue != $("#main-menu li:first").text()) {
            firstMenuValue = $("#main-menu li:first").text();
            $("#google_translate_element").fadeOut("fast");
        }

    };
    setInterval(check, 2000);
};

checkIfTranslated();

I hope this helps out somebody at least.

Solution 3:

My guess is that you would need to verify that the HTML from Google has been injected before running your JS code.

I can't seem to find a callback event on the TranslateElement just make a check for a HTML item you know is suppose to be there before running your code. Google Translate Widget - Translation complete callback

Solution 4:

This is what works for me flawlessly:

$("body").on("change", ".goog-te-combo", function (e) {
        if($(".goog-te-combo").val() == 'ar'){
            $("html").children().css("direction","rtl");
        }
        else{
            $("html").children().css("direction","ltr");
        }
    });

This is how I change the page direction from ltr (left-to-right) to rtl (right-to-left) when Arabic (ar) is selected as language, and vice-versa.