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.
On
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.
On
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.
On
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.
On
<!--
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
you can get you google translator code from https://translate.google.com by giving you website URL.
LIKE THIS: