CODEWITHSUNDEEP
javascripthtmlgoogle-translate
Craig
Craig

Reputation: 1794

Google Translate isn't Hidden

Having opted for the "Automatic" version of Google Translate Widget, I expected not to see the "Select Language" dropdown if my browser was the same language as the site. However, I see it all the time no matter what I set the html lang attribute to or what I set my browsers preferred language to. I have also noticed that it doesn't seem to make any difference whether the meta "google-translate-customization" tag is there or not, the widget is always in view.

I'd like the site to just be translated if the users browser isn't set to English.

Any advice would be appreciated.

Code used:-

In head:-

<meta name="google-translate-customization" content="6bb255d109276506-b73cb06230e6b6c0-gbb2acb9bc95b4a11-12"></meta>

In Body:-

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

Upvotes: 6

Views: 3328

Answers (2)

Mousey
Mousey

Reputation: 1865

Finally a fix for this (which is a long-standing bug in google). The code below hides the language selection drop-down box for English users on an English page. It copdes with locales like en-US also and newer browsers. 

<div id="google_translate_element"></div>
<script type="text/javascript">
var userLang = navigator.language || navigator.userLanguage || navigator.languages; 
if (userLang.substr(0,2) != "en"){
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: 
    google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
   }
 }
else { 
  document.getElementById("google_translate_element").style.display="none";
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

cross-browser compatibility explained

Upvotes: 0

Stefan
Stefan

Reputation: 1895

You can try this small jquery script:

var userLang = navigator.language || navigator.userLanguage; 
if(userLang == "en"){
    $("#google_translate_element").css(["display", "none"]);
}

Not sure if the if is right I'm using a dutch browser and it showed nl as userLang. I'm pretty sure the english one should be named en. Otherwise you have to alert userlang and change it to that.

alert(userLang);

Heres the jsfiddle: http://jsfiddle.net/u950mwom/1/

Upvotes: 3

Related Questions