Google Translate override select change event

Question

I've got a wierd issue:

<div id="translate">
    <a href="#" id="google-translate" title="Google translate">Translate</a>
         <div id="google_translate_element" style="display:none">
         <script>
         function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: "sv" }, "google_translate_element");
         };
         </script>
     </div>
</div>

Which gives me the following:

<div class="skiptranslate goog-te-gadget" style="">
  <div id=":1.targetLanguage">
    <select class="goog-te-combo">
    </select>
  </div>
    Powered by
  <span style="white-space: nowrap;">
  </span>
</div>

I cannot however seem to hijack the change event being triggered when selecting a new language.

I've tried by doing the following:

var $textfield = find("#google-translate");
var $popup = find("#google_translate_element");
var $select = $popup.find("select");

$textfield.click(function () {
    $popup.fadeIn("fast");
    return false;
});

$select.bind("change", function () {
    $popup.fadeOut("fast");
});

Have anyone got a solution for this?

BR, Henric

Nonconductor

Which event are you trying to hijack? Do you mean the onchange event on the select element? – Pardon

I want to see when the user changes language. Since this selection box is usually hidden. I want to re-hide it upon select. I've tried adding: var $gadget = find("#google_translate_element"); var $select = $gadget.find("select"); $select.bind("change", function () { $gadget.fadeOut("fast"); }); BR, Henric – Nonconductor

The code you've given appear incomplete and it makes it difficult to come up with ideas how to resolve your problem. Maybe you want to put a demo of what you're trying into a JSFiddle.net like this: jsfiddle.net/4c5f5. – Pardon

Sorry if I've missed something, but the solution has now been found. Thanks fo all your help :) – Nonconductor

Answer 1

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.

Nonconductor

Answer 2

The code below suggested by MjrKusanagi works wonderfully.

$("body").on("change", "#google_translate_element select", function (e) {
    console.log(e);
    console.log($(this).find(":selected").text());
    console.log($(this).find(":selected").val());
});

To view all data inside the drop down

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

Toon

Is there any chance to post full working code with HTML in JSFIDDLE or some thing similar ? – Daugava

I had an issue when I had layout parameter set , it wasn't select->option element. When I removed the layout it started to work. Can you post an example without Jquery. Because I use it on static single page without JS (Single HTML without any dependencies). – Daugava

Yes, this works as long as the Google Translate element is a Select. I found that either having too many target languages or activating "source page contains multiple languages" turns the Google Translate element into a div, which seems impossible to latch on to. – Modular

it should not change by itself, I think you can set layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL – Toon

Answer 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

Oenomel

You don't need to know if the item is there or not. You can use the jQuery .on() method to bind the event handler to some parent of the target element. Example: $('body').on('change','#google_translate_element select',function(ev){/*do fun stuff here*/});. – Pardon

Answer 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.

Expectant