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-bo">
    </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

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-bo">
    </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

• javascript
• html
• css
• google-translate

• Which event are you trying to hijack? Do you mean the onchange event on the select element? – Femi Commented Mar 21, 2014 at 15:24
• 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 – Henric Commented Mar 24, 2014 at 7:08
• The code you've given appear inplete and it makes it difficult to e up with ideas how to resolve your problem. Maybe you want to put a demo of what you're trying into a JSFiddle like this: jsfiddle/4c5f5. – Femi Commented Mar 24, 2014 at 18:00
• Sorry if I've missed something, but the solution has now been found. Thanks fo all your help :) – Henric Commented Mar 25, 2014 at 7:14

4 Answers 4

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-bo").find("option").each(function () {
    console.log($(this).text() + ", " + $(this).val() + "\n");
});

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.

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 plete callback

This is what works for me flawlessly:

$("body").on("change", ".goog-te-bo", function (e) {
        if($(".goog-te-bo").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.