Make Custom Drop down Menu for Google Translate

Published on June 25, 2013

Hi, guys how you doing? Recently I tried to put Google Translate widget on one my blog. The default look(Drop down Menu) doesn’t match with my template and it change from browser to browser. So I started customizing it. To be honest I felt little difficult than thought to customize the UI of Google Translator. So here I make a small tutorial for you how to customize Google Translate drop down menu.

There are three main challenges. First I need to convert Drop down Menu(HTML select box) into list items(HTML: ul ,li). First I started writing jQuery plug-in but in middle, I fond a really amazing plugin called jquery.selectBox. It is just exactly what I want.

The second challenge is we need to execute this plugin only after Google Translate loaded(Google translate uses async loading). But the plug-in loads when page ready.

Third Problem is attaching on change event from Google translate Drop down menu to HTML list box. So now let’s see how can we solve all three problems to get want we want.

Step 1

First of all, go to https://translate.google.com/manager/website/ and click on “ADD YOUR WEBSITE NOW” button and enter your website details. In final step, you will get one meta take code(something like this)

<meta name="google-translate-customization" content="e6d13f48b4352bb5-f08d3373b31c17a6-g7407ad622769509b-12"></meta>

and some JavaScript code

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

Put meta tag in the head section and the javaScript code where you want to display the translate widget. If you open your browser you will see default google translate widget on your web page. (Note: Google translate won’t work from file system you need to use either xamp or IIS to make it work from localhost).

Step 2

Now let’s apply the our plugin jquery.selectBox. Just put the following scripts in your file.

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
  type="text/javascript"
></script>
<script src="js/jquery.selectBox.js" type="text/javascript"></script>

Hope you downloaded jquery.selectBox plugin js from above link. Now add this code to activate select box plug-in.

function changeGoogleTranslate() {
  if ($(".goog-te-combo option:first-child").text() == "Select Language") {
    $(".goog-te-combo").selectBox();
  } else {
    setTimeout(changeGoogleTranslate, 50);
  }
}
changeGoogleTranslate();

Actually we need only $('.goog-te-combo').selectBox(); to activate jquery plug-in. All the access code ensures that Google translates loaded before applying the select plugin.

Step 3

In this, we will solve the final problem attaching google select box onchange event to your HTML li. Just update the below code in your script you wrote in step2.

function changeGoogleTranslate() {
  if ($(".goog-te-combo option:first-child").text() == "Select Language") {
    $(".goog-te-combo")
      .selectBox()
      .change(function() {
        var gObj = $(".goog-te-combo");
        var db = gObj.get(0);
        gObj.val($(this).val());
        fireEvent(db, "change");
      });
  } else {
    setTimeout(changeGoogleTranslate, 50);
  }
}
changeGoogleTranslate();

function fireEvent(el, e) {
  if (document.createEventObject) {
    //for IE
    var evt = document.createEventObject();
    return el.fireEvent("on" + e, evt);
  } else {
    // For other browsers
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(e, true, true);
    return !el.dispatchEvent(evt);
  }
}

That’s it. Hope this will help you somewhere. Thank You!