Skip to content

Instantly share code, notes, and snippets.

@artturik
Created April 4, 2016 09:09
Show Gist options
  • Save artturik/15bed885bcec6faa95eb73acb2e2ae54 to your computer and use it in GitHub Desktop.
Save artturik/15bed885bcec6faa95eb73acb2e2ae54 to your computer and use it in GitHub Desktop.
Forced Google Translate (also can be used as April Fools Day joke)
<!--
This code will translate page contents automatically (without user input)
Settings located at line 9, current script will translate english to estonian
-->
<style>#google_translate_element,.skiptranslate{display:none;}body{top:0!important;}</style>
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'et', autoDisplay: false}, 'google_translate_element');
var a = document.querySelector("#google_translate_element select");
a.selectedIndex=1;
a.dispatchEvent(new Event('change'));
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
@gtshihata
Copy link

It seems like it doesn't select automatically for me

@gtshihata
Copy link

just a quick update ...
this should work for some guys who had the issue that I faced.

<style>#google_translate_element,.skiptranslate{display:none;}body{top:0!important;}</style>
<script>

function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'fr', autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
}
var a = document.querySelector("#google_translate_element select");
a.selectedIndex=1;
a.dispatchEvent(new Event('change'));
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

@rafatmukadm
Copy link

<style>#google_translate_element,.skiptranslate{display:none;}body{top:0!important;}</style>
<script> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'et', autoDisplay: false}, 'google_translate_element'); var a = document.querySelector("#google_translate_element select"); a.selectedIndex=1; a.dispatchEvent(new Event('change')); } </script> <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

@seanvree
Copy link

seanvree commented Apr 3, 2018

I can't get this to work @rafatmukadm

Getting the error:

(index):187 Uncaught TypeError: Cannot set property 'selectedIndex' of null
    at (index):187

image

@lrente
Copy link

lrente commented Mar 6, 2019

Any reason i'm getting this error:

Uncaught TypeError: google.translate.TranslateElement is not a constructor .

Thanks

@Sampada1330
Copy link

by default is selecting language whatever am passing...but its not translating into another language.

@NomadAndInLove
Copy link

Is there a way to change this so that the script adds rel attributes to the following link that's added to my site?

<a class="goog-logo-link" href="https://translate.google.com" target="_blank" rel="noopener noreferrer"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px" alt="Google Translate">Translate</a>

@G0kulRaj
Copy link

Any reason i'm getting this error:

Uncaught TypeError: google.translate.TranslateElement is not a constructor .

Thanks

Have you find the reason?

@DeletedByAccident
Copy link

DeletedByAccident commented Aug 29, 2023

<!-- modify styles to hide the element -->
<style>#google_translate_element,.skiptranslate{display:none;}body{top:0!important;}</style>
<!-- create the actual element -->
<div id="google_translate_element"></div>

<script>
function googleTranslateElementInit() {

/* 
Get the current browser language.
*/
var langBrowser = navigator.language || navigator.userLanguage;

/* If the language contains a region code, get only the 2-character lang code. For example en-US -> en. */
var currentBLang = langBrowser.split('-')[0];

/* pageLanguage: 'auto'  ----- includedLanguages: currentBLang */
new google.translate.TranslateElement({pageLanguage: 'auto', includedLanguages: currentBLang, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');

var aChange = document.querySelector("#google_translate_element select");

/* set the index value to 0 here. */
aChange.selectedIndex = 0;

aChange.dispatchEvent(new Event('change'));
}
</script>

Load the above code at the beginning of the body.

Then place <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> at the end of the body.

@Titan-Node
Copy link

This will only translate the page if the browser is NOT english

<div id="google_translate_element"></div>

<script type="text/javascript">
    function googleTranslateElementInit() {
        /*
Get the current browser language.
*/
var langBrowser = navigator.language || navigator.userLanguage;

/* If the language contains a region code, get only the 2-character lang code. For example en-US -> en. */
var currentBLang = langBrowser.split('-')[0];

      new google.translate.TranslateElement({
        pageLanguage: 'en',
      }, 'google_translate_element');
      if (currentBLang != "en"){
      setTimeout(function() {
        // Set the default language to Spanish
        var selectElement = document.querySelector('#google_translate_element select');
        selectElement.value = currentBLang;
        selectElement.dispatchEvent(new Event('change'));
      }, 1000);
    }
    }
  </script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Change your chrome browser to a different default language and test it for yourself
https://www.indeed.com/career-advice/career-development/change-language-in-chrome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment