Implementing Google Translate with custom flag icons

Implementing Google Translate with custom flag icons

Currently, I'm using the simple Google Translate drop-down menu found here: http://translate.google.com/translate_tools

I'd like to also be able to click on some flag icons I have and trigger the same javascript calls that the text-based links in the google translate widget.

Anyone have ideas on how to accomplish this? I can't figure out how to make clicking on the flags initiate the same behavior as clicking on the google translate text links.

Answer by mogelbrod for Implementing Google Translate with custom flag icons

Had a lot of fun finding a solution for this question!

  
    
Spanish
    
German
  
      
            

Answer by Boris Samardžija for Implementing Google Translate with custom flag icons

@mogelbrod code isn't always working so I hacked it a bit.

If user is logged in Google Account, Google will detect it's language and automatically translate language text so you won't be able to fire event on desired element because data-lang attribute won't be correct!

Users that aren't logged in Google Account and American / English users will have this.

And for example; Croatian users will have this.

In this case it's better to map language order. For example from above, that would be

0 - English

1 - French

2 - German

3 - Italian

HTML:

Note the data-placement property (you can change element order, but preserve placement as above).

      eng icon      fra icon      ger icon      ita icon  
  

JS: I had to change find selector. Note that when user choses language, there's no more "Choose Language" element in #google_translate_element div so I had to handle that, too.

Also it's good not to show icons until all scripts (google translate) are loaded.

$(window).load(function () {        $('.translation-icons').css('visibility', 'visible');            $('.translation-icons a').click(function(e) {              e.preventDefault();              var placement = $(this).data('placement');              var lang_num = $('.translation-icons a').length;              var $frame = $('.goog-te-menu-frame:first');                if (!$frame.size()) {                  alert("Error: Could not find Google translate frame.");                  return false;              }                var langs = $('.goog-te-menu-frame:first').contents().find('a span.text');                if(langs.length != lang_num) placement = placement+1;                langs.eq(placement).click();              return false;          });  });  

Answer by joeyend for Implementing Google Translate with custom flag icons

@mogelbrod, I used your code above and it worked perfectly on Chrome, tried it on Firefox and Safari, did not work. The span.click event doesn't fire the event handler of google translate.

I came up with another method I just wanna share by using the google select instead the iframe-based plugin.

  
    
Spanish
    
German
  
      
            

Tested on: Chrome (win & Mac), Safari(Win & Mac), FireFox (win) and IE8

By the way, the issue of the span.click event I encountered on Firefox and Safari could be solved by using the triggerHtmlEvent function above, I haven't tried it though.

Answer by PalmWorks for Implementing Google Translate with custom flag icons

Now no scripting is required!

Add the tag #googtrans(TO_LANG_CODE) to the address that your respective flag links to.

Here TO_LANG_CODE is the language code for the language you want. This assumes the page uses Google Website Translator as in the question and your original language can be automatically identified.

Identifying the original language can help avoid errors, to do so use the form #googtrans(FROM_LANG_CODE|TO_LANG_CODE).

Example:
http://nykopingsguiden.se/#googtrans(se|es) translates the Swedish page
http://nykopingsguiden.se from Swedish to Spanish.

Answer by Isaac for Implementing Google Translate with custom flag icons

default language issue sorted with the following code

if(lang!="English"){          $frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();      }else{          console.log($frame2.contents().find('.goog-te-banner .goog-te-button button').get(0));          $frame2.contents().find('.goog-te-banner .goog-te-button button').get(1).click();      }  

Answer by Riki_VaL for Implementing Google Translate with custom flag icons

To implement a totally backend solution (before the translate.js included) you just can create a php file which contains

If you want your page in spanish you just add other php file like:

Finally link this file to any 'a' tag

Answer by Kamal Pratap for Implementing Google Translate with custom flag icons

Implementing Google Translate With Custom Flag Icons

Refer This Link

http://www.freshcodehub.com/Article/32/implementing-google-translate-with-custom-flag-icons

The benifit of this custom list is than we can hide the google translator widget and use all the language to translate the web page.

Answer by Jindřich Prokop for Implementing Google Translate with custom flag icons

This is a fix to Boris Samardžija's solution as it fails whenever the names of the languages in the visitor's language result in their different order.

First, have correct language codes in some attribute of the icons. E.g. . Then, make sure you will have google translate element available, e.g.:

This allows you to find the language name to be translated to in the language of the visitor through the property sl of property C of the google element, which is a mapping of language codes to the names:

$(window).load(function () {          $('.translation-links a').click(function(e) {          e.preventDefault();          var $frame = $('.goog-te-menu-frame:first');            if (!$frame.size()) {              alert("Error: Could not find Google translate frame.");              return false;          }            var codes_names = tis.C.sl;          var selected_lang = codes_names[$(this).data('class')];            $('.goog-te-menu-frame:first').contents().find('a span.text:contains(' + selected_lang + ')').click();            return false;      });  });  

Answer by Aleksandra Chuprova for Implementing Google Translate with custom flag icons

I was struggling with this problem too - to make the flags clickable and to hide the gtranslate select menu instead. Google probably changes thing from time to time so the codes above didn't work for me... Thought they brought me to the good ideas and finally the solution.

1. map the languages. Choose the languages you need and loog good in which order they are shown in the gtranslate dropdow - the flag links should have the same order. It is important!

2. in the function proveded bu google function googleTranslateElementInit(), add the MultilanguagePage: true parametr. I have also commented out the default language and pagelanguage... for some reason this works...

    //load the script of google        

   I used setcookie() on PHP:

   if ($_GET['lang']) {    setcookie("googtrans", "", time() - 3600);    $domena = "." . $_SERVER['HTTP_HOST'];    setcookie("googtrans", '/pl/' . $_GET['lang'], time()+(3600*24), '/' , $domena);  }  

   I don't know why google script makes 2 same cookies, with the same name, but different domain:

   look at the screen of EditThisCookie

   ($_COOKIE[] sees only one cookie)

   so this code needs to name domain with "." on beggining, and first delete "googtrans" cookie (doesnt work without deleting ;/ ).

   and here are my html icons:

   wybierz język:        

   and to hide default google select list which is generated, just add one line to css code:

   #google_translate_element {display: none; }  

   Remember to change page language values before using code above ;)

   
   Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72