Google Translate not working with dynamic content in web HTML

Question

To achieve a multi-language website, I have attached the below code in the HTML.

reference: https://www.w3schools.com/howto/howto_google_translate.asp

<div id="google_translate_element"></div>
<script>
  function googleTranslateElementInit() {
      new google.translate.TranslateElement(
         {pageLanguage: 'en'},
          'google_translate_element'
      );
  }

</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script

But translation does not work with dynamic rendering content. if I refresh the page then it will work.

anyone could help? how can I achieve translation without refreshing the page?

Answer 1

Please try the following html/css/js sample code, for Google Translate, that works fine on my website. In fact, this code can be used by any website designers / programmers, to make their websites fully support multi languages via translations.

Usage: Just copy and save this code, for example, to a test.html file and then view it on the internet browser. That's all.

<style>

.center_ii {
  display: flex;
  justify-content: center;
  align-items: center;
  // height: 200px;
  background: #086cdf;
  color: #fcfbfc;
  border: 3px solid white; 
  padding: 10px;
  margin-top: 40px;
  margin-bottom: 40px;  
}

.google-translate {
    display: inline-block;
    vertical-align: top;
    padding-top: 15px;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

#google_translate_element {
    display: none;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;
}


.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

#goog-gt-tt, .goog-te-balloon-frame{display: none !important;} 
.goog-text-highlight { background: none !important; box-shadow: none !important;}

.goog-logo-link{display: none !important;}
.goog-te-gadget{height: 28px !important;  overflow: hidden;}

body{ top: 0 !important;}
.goog-te-banner-frame{display: none !important;}

#google_translate_element {
  display:none;
}

.goog-te-balloon-frame { display: none; }

#google_translate_element{width:300px;float:right;text-align:right;display:block}
.goog-te-banner-frame.skiptranslate { display: none !important;} 
body { top: 0px !important; }
#goog-gt-tt{display: none !important; top: 0px !important; } 
.goog-tooltip skiptranslate{display: none !important; top: 0px !important; } 
.activity-root { display: hide !important;} 
.status-message { display: hide !important;}
.started-activity-container { display: hide !important;}

.goog-te-combo {
    display: none;
}

</style>


<div id="translation" class="center_ii"></div>  

<p>This is a sample paragraph that needs to be translated.</p>   


<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=google_translate"></script>
<script>
function google_translate (){ 
    var opt = { 
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
        pageLanguage: "en" 
    }; 
    new google.translate.TranslateElement( opt, "translation" ); 
} 

/*  
Display the scrollable list of languages. 
Related to the size of current browser. 
*/
addEventListener( "load", function(){ 
    if ( document.querySelector(".goog-te-menu-frame") ) { 
    
        document.getElementById( "translation" ).addEventListener( "click", function(){ 
            if ( this.id === "translation" ) scrollableLanguagesList(); 
        }); 
        addEventListener( "resize", function(){ 
            if ( "none" !== document.querySelector(".goog-te-menu-frame").style.display ) scrollableLanguagesList(); 
        }); 
    
    } 
}); 

function scrollableLanguagesList (){ 
    var 
     iframe = document.querySelector( ".goog-te-menu-frame" ), 
     doc = iframe.contentWindow.document, 
     div = doc.body.children[ 0 ], 
     table = div.children[ 0 ], 
     width = div.dataset.width || parseInt( div.style.width ), 
     rect, diff; 
    
    if ( ! div.dataset.width ) div.dataset.width = width; 
    
    if ( innerWidth < width ) { 
        rect = table.getBoundingClientRect(); 
        width = rect.right - rect.left; 
        diff = width - innerWidth; 
        
        div.style.width = ( width - diff - 24 ) + "px"; 
        div.style.padding = "4px 0 1em 4px"; 
        div.style.overflowX = "scroll"; 
    } 
    else { 
        div.style.width = "auto"; 
        div.style.padding = "4px"; 
        div.style.overflowX = "visible"; 
    } 
    
    rect = div.getBoundingClientRect(); 
    iframe.style.width = ( rect.right - rect.left ) + "px"; 
    iframe.style.height = ( rect.bottom - rect.top ) + "px"; 
} 
</script>

<script type="text/javascript">

    $(document).ready(function() 
    {       
        translationTooltipsDisable();
    });

    function translationTooltipsDisable()
    {       
        //Override google's functions
        _tipon = function()  { /*Don't display the tooltip*/ };
        _tipoff = function() { /*Don't hide the tooltip*/ };
    }

</script>

Answer 2

Try this one:

<div id="google_translate_element"></div>
<script>
    function googleTranslateElementInit() {
        new google.translate.TranslateElement(
            { pageLanguage: 'en' },
            'google_translate_element'
        );
    }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
    const addText = () => {
        document.getElementById("text").innerHTML += "New text"
    }
</script>

<h1>Hello World</h1>
<div id="text"></div>
<button onclick="addText()">Add text</button>