Menu
I'm trying to get multiple instances of Google Translation Drop Down to show up, but it seems it will only pick one to show up.
Full Page Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Google Translate</title>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="header" style="background-color: red;">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit(){
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<strong>A</strong>
</div>
<div id="footer" style="background-color: blue;">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit(){
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<strong>B</strong>
</div>
</body>
</html>
Below I've listed out some things that I've tried and it's result. Every test I revert back to the default code shown above.
Test 1: 2 header scripts that call element.js but change the 2nd ?cb=googleTranslateElementInit to my footer translate function.
Result: Only the id="header" Translate shows up.
Test 2: In my id="footer" translation function call I change the second parameter to a seperate ID than the id="header function call. so it looks like this: new google.translate.TranslateElement({pageLanguage: 'en'}, 'test'); I then change my id="footer" translation div to match the parameter.
Result: Only the id="footer" Translate shows up.
Test 3: Add a 2nd translation script to the footer and change ?cb= to ?cb=translateTest. I also change my id="footer" translate function call to match translateTest and the parameter / translate div id to test.
Result: Only the id="footer" Translate shows up.
598
I attempted may of these options, but ultimately needed to completely .detach() the element in order for the second to work.
In this case it was for a responsive website where the translate needed to work in two different menus:
<div id="m_google_translate_element"></div>
<div class="rightHeader" id="mobileHeader">
<div class="translate" id="g_translater">
<div id="google_translate_element"></div>
<script type="text/javascript">
var m = false;
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_RIGHT, gaTrack: true, gaId: 'UA-XXXXXX-1'}, 'google_translate_element');
setTimeout(function(){
if (jQuery( window ).width() < 768){
m = true;
jQuery('#g_translater').detach().appendTo('#m_google_translate_element');
}
}, 3000);
}
jQuery( window ).resize(function() {
if (jQuery( window ).width() < 768 && m == false){
m = true;
jQuery('#g_translater').detach().appendTo('#m_google_translate_element');
} else if (jQuery( window ).width() >= 768 && m == true){
m = false;
jQuery('#g_translater').detach().prependTo('#mobileHeader');
}
});
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
</div>
This is practically not achievable as Google has not built it to work with multiple instances on the page at all. After hacking with the code a little, this is the best you can achieve http://jsbin.com/hiwazedi/1/
To get this to work how you want, you would have to download and host all the files yourself and make heavy modifications. Seeing as how all the code is obfuscated, this wouldn't be easy. It would also most likely break after a while if and when Google updates how it works on their end. Lastly this would most likely be against their terms of service.
The only reason I could see you wanting to do this is to display it in the header and footer for example. If so I would either position it fixed, so that the user can see it where ever they scroll on the page. Alternatively you could detect when the user is near the bottom of the page and move it to the footer.
35
function googleTranslateElementInit() {
// new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,nl,fr,ru,ja,es,ko,pt', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
if ($(window).width() < 760) {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,nl,fr,ru,ja,es,ko,pt', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element2');
}
else{
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,nl,fr,ru,ja,es,ko,pt', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element1');
}
}
</script>
And:
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
