Translate website to any specific language, on page load

Question

Anybody have any idea how to translate a web page into any language using Google translate when it loads?

I don't want a drop down menu, I just want to convert the website into a specific language when it loads. I have tried many things from http://code.google.com/p/jquery-translate/ but all in vain. Any good suggestions would be appreciated.

score 17 · Answer 1 · answered Jun 05 '16 at 21:45

<!--
  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>

From this gist: https://gist.github.com/artturik/15bed885bcec6faa95eb73acb2e2ae54

score 8 · Answer 2 · edited Nov 07 '12 at 14:15

8

From Google Translate Help:

To create a link that automatically translates your Website Translator-enabled page without prompting your users, use the parameter #googtrans(en|TARGET_LANG_CODE).

For example, the link http://translate.google.com/support/#googtrans(en|fr) automatically translates the page http://translate.google.com/support/ into French.

edited Nov 07 '12 at 14:15

Paolo Moretti

54,162
23
101
92

answered Oct 31 '12 at 05:07

Wazan

539
1
8
27

2

It worked for me. But the page is first showing up in English and translating after a few seconds. Is there a way I can hide the page till it translates? – sundeepg Mar 03 '17 at 11:12

score 5 · Answer 3 · answered Oct 23 '12 at 12:21

you can get you google translator code from https://translate.google.com by giving you website URL.

LIKE THIS:

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ar', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

actually i don't need this drop down thing, i just want,my page which is in English automatically translate into swedish on page load event. — MM2, Oct 23 '12 at 12:42

Deepu Namboodiri · Answer 4 · 2023-04-28T07:14:48.790

The problem with the google translate is that it works with some time lag. I tried it with 10,100 and 1000ms but only the 1000ms(means 1 second) worked perfectly. I hope this one does the job for you.

Style the google_translate_element as display:none to hide it.

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

This will translate the page to Spanish ("es") on page load.

score 0 · Answer 5 · answered Sep 10 '19 at 11:22

it is working code currently it is being used

<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

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

<style>
body > .skiptranslate {
    //display: none;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
    } 
body {
    top: 0px !important; 
    }

@media print {
  #google_translate_element {display: none;}
}
</style>

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

<p>This example displays a simple translate button, with no text.</p>
<p>This example displays a simple translate button, with no text.</p>

<div class="notranslate">
<p >This is a paragraph.</p>
<p >
A particle is kept at rest at the top of a sphere of diameter \(42 m\). When disturbed slightly,
it slides down. At what height \( h \) from the bottom, the particle will leave the sphere <br\>
(a) \( 14m \)
(b) \( 16m \)
(c) \( 35m \)
(d) \( 70m \)

</p>
</div>

</body>
</html>

It will translate you web page content. if you don't want to translate any particular div content just use class notranslate. then google translator will not translate that div content.

Translate website to any specific language, on page load

5 Answers5

Linked