Multiple Instances of Google Translate

google-translate, html, javascript, multiple-instances

Solution

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>

Problem

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.

Original source