I have used google translate element with code:
<div id="google_translate_element"></div>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
This gives me standard language selector dropdown with english labels.
How can I customize the language label to be in that language itself? The result that I want is:
<select>
<option selected="selected" value="">select</option>
<option value="af">Afrikaans</option>
<option value="sq">shqip</option>
<option dir="ltr" value="ar">العربية</option>
<option value="be">Беларуская</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="zh-CN">中文(简体)</option>
<option value="zh-TW">中文(繁體)</option>
<option value="hr">Hrvatska</option>
<option value="cs">česky</option>
<option value="da">Dansk</option>
<option value="nl">Nederlands</option>
<option value="et">Eesti</option>
<option value="tl">Filipino</option>
<option value="fi">suomi</option>
<option value="fr">Français</option>
<option value="gl">Galego</option>
<option value="de">Deutsch</option>
<option value="el">Ελληνικά</option>
<option dir="ltr" value="iw">עברית</option>
<option value="hi">हिन्दी</option>
<option value="hu">magyar</option>
<option value="is">Íslenska</option>
<option value="id">Indonesia</option>
<option value="ga">Gaeilge</option>
<option value="it">Italiano</option>
<option value="ja">日本語</option>
<option value="ko">한국어</option>
....
</select>
UPDATE I though of replacing the innerHTML of the google-generated select
var googleDropdown = $("#google_translate_element .goog-te-combo");
var customDropdown = $("#custom-translate");
googleDropdown.innerHTML = customDropdown.innerHTML;
The custom select:
<select id="custom-translate" style="display:none;">
<option value="">Select Language</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="am">Amharic</option>
<option value="ar">Arabic (العربية)</option>
...
</select>
This works when I try it on the console when everything is loaded, but when I add this code in file, the problem is googleTranslateElementInit executes in the end.
So how do I make my code execute after the google translate is done?
@margaret thank you for your response.
But I ended up using a function which sets the labels after the element is loaded. Called that function onclick of the drowdown:
<div id="google_translate_element" onclick="foo();">
function foo(){
$("option[value='ar']").text("عربى (Arabic)");
$("option[value='fr']").text("Français (French)");
//.... so on
}