How to force google translate to translate the page after the script loads?

Question

<script type="text/javascript"> 

function googleTranslateElementInit() { 
  new google.translate.TranslateElement(
  {
      pageLanguage: 'ru',
      layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
      autoDisplay: true
  },
  'google_translate_element'
  ); 
}

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

The scripts loads, but after it loads it doesn't translate the page. I need to select the language from the selectbox. How to make it auto translate without selecting the language from the select box?

or where can I see the parameters list of javascript api?, can't find it... — user3016968, Dec 03 '13 at 14:34
possible duplicate of [Translate website to any specific language, on page load](http://stackoverflow.com/questions/13030153/translate-website-to-any-specific-language-on-page-load) — Alex W, Dec 03 '13 at 14:36
there the translation is TO english, but I want FROM english to other language, the problem is that google translator translates only to english, but how to change that behaviour — user3016968, Dec 03 '13 at 14:42
The answer is here: http://stackoverflow.com/a/13151571/496538 — Lutsen, Apr 11 '16 at 10:00

score 4 · Answer 1 · answered Jul 05 '18 at 05:36

The basic idea that you need to add cookies that google translate looks for when it's loading the element, and then you can even hide google translate elements using CSS.

Here is a short example using js.cookie:

    <div class="custom-translate" st yle="display: none;" id="google_translate_element"></div>


<!-- ASYNCHRONOUS Google Translate -->
<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
            pageLanguage: 'en',
            layout: google.translate.TranslateElement.FloatPosition.TOP_RIGHT,
            autoDisplay: false
        }, 'google_translate_element');
    }

    (function () {
        var googleTranslateScript = document.createElement('script');
        googleTranslateScript.type = 'text/javascript';
        googleTranslateScript.async = true;
        googleTranslateScript.src =
            '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(
            googleTranslateScript);
    })();

    Cookies.set('GoogleAccountsLocale_session', 'iw', { expires: 999});
    Cookies.set('googtrans', '/en/iw', { expires: 999});
</script>

CSS to hide the google translate elements:

<style>
.goog-te-banner-frame,.custom-translate {
        display: none;
}

body {
        top: 0 !important;
    }
.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

</style>

score 1 · Answer 2 · answered Dec 03 '13 at 14:34

Based on the code snippet you don't above there appears to be a couple things wrong. I would probably restructure like so...

<script type="text/javascript" src="http://translate.google.com/translate_a/element.js"></script>
    <script type="text/javascript"> 

function googleTranslateElementInit() { 
  new google.translate.TranslateElement(
  {
      pageLanguage: 'ru',
      layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
      autoDisplay: true
  },
  'google_translate_element'
  ); 
}

googleTranslateElementInit();

</script>

You need to make sure that the google translate script file is loaded prior to your code attempting to execute. Then you need to execute your function...

no it doesn't work, as I see google translates all the languages to english, but how to make it translate from english to other language? — user3016968, Dec 03 '13 at 14:41
Checkout this related post. http://stackoverflow.com/questions/7986344/google-translate-element-load-after-page-ready — xspydr, Dec 03 '13 at 18:36

How to force google translate to translate the page after the script loads?

2 Answers2

Linked