How do you customize this code so that upon loading it will auto translate the page without clicking the select button. example i want to load the page automatically in spanish??
<div id="google_translate_element"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: "en" }, "google_translate_element");
};
$.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
});
In Website Translator form in "Plugin Settings" tab choose "Translation languages" > "Specific languages" > "Spanish". Set "Automatic" in "Display mode" and check the checkbox "Automatically display translation banner to users speaking languages other than the language of your page." in "Advanced" block.
Here is the code of the HTML page as example. Google translation bar and drop-down list with names of languages are hidden using CSS. JS code makes a click on the select option for the translation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Google translate</title>
<style>
.skiptranslate, #google_translate_element {display: none;}
body {min-height: 0px !important; position: static !important; top: 0px !important;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
The text is translated using Google translate.
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
$.when(
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es',
layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element')
).done(function(){
var select = document.getElementsByClassName('goog-te-combo')[0];
select.selectedIndex = 1;
select.addEventListener('click', function () {
select.dispatchEvent(new Event('change'));
});
select.click();
});
}
</script>
</body>
</html>