Results 1 to 3 of 3

Thread: Google website translate with custom icons

Threaded View

  1. #1
    Join Date
    Oct 2011

    Google website translate with custom icons

    Google offers a drop-down menu where you choose the language you wish to translate to (http://translate.google.com/translate_tools).
    What I want is that same menu displayed as small flag icons users would click on to get the translated version.
    I have found this on the web: http://stackoverflow.com/questions/1...tom-flag-icons and encountered several problems. First of, the href attribute of the anchor tag is '#', which instead of doing nothing, for some reason scrolls to the bottom of the site when linked to. To avoid that, I edited the html code into this:
    HTML Code:
    <ul id="translation">
      <li class="English" title="English"><img src="images/misc/flags/gb.png"/></li>
      <li class="German" title="Deutsch"><img src="images/misc/flags/de.png"/></li>
      <li class="Italian" title="Italiano"><img src="images/misc/flags/it.png"/></li>
    This is the code provided by google:
    <div id="google_translate_element"></div>
    <script type="text/javascript">
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'hr', includedLanguages: 'de,en,it', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
    And this is the partially working code I found on the web:
    <script type="text/javascript">
        $('#translation li').click(function() {
          var lang = $(this).attr('class');
          var $frame = $('.goog-te-menu-frame:first');
          if (!$frame.size()) {
            alert("Error: Could not find Google translate frame.");
            return false;
          $frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();
          return false;
    So, I've got a website in Croatian (hr) and need it to be translatable into English (en), German (de) and Italian (it). The code above is completely working in Chrome, but fails to do anything in Mozilla or IE. The drop-down menu is functional in all browsers. I need this fixed!

    Also, I discovered an interesting problem when translating from a translated version back to the language the site is in. In order to do so, we need to add Croatian in the includedLanguages, like so:
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'hr', includedLanguages: 'hr,de,en,it', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
    On the first page load, the drop-down menu offers a choice of only three languages, with the 'Select language' label in place of the default language. When clicking on any language, the 'Select language' label switches to Croatian (which is obviously the default language), so there are four languages to choose from now. However, when selecting Croatian now that it's available, it actually gives a false translation (possibly translating the last selected language into Croatian instead of not translating anything and simply displaying the original. It is possible that the original is being treated as English and then translated into the language of the original, because 'slike' in Croatian gets translated into 'takav' which means 'like' in English). Also, when translating from the 'false' Croatian translation into any other language, it switches the 'false' into the 'real' translation first, giving the same choice you get on first page load (therefore, two clicks are required to get the wanted translation). It is possible there are no such issues when English is set as the default language, but since the Google translation toolbar offers a fairly visible 'Show original' button, I can live without the Croatian flag and this is a minor problem, I only need the code to work in all major browsers.

    Any help is appreciated.
    Last edited by janje; 10-02-2012 at 08:15 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center