Dynamic translate

by gibito

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>
    <title>I want this title to be translated</title>
  </head>

  <body>
    <div class="main">
    <p>I want this text to be translated <span id="parentInsideDIVThatIsTranslated"></span> into the language the user selects from the menu</p>
    </div>
    <div id="google_translate_element"></div>
  </body>

</html>

JavaScript

let pageSourceLang = 'en';
let excludeTranslation = [
    '.dynamicNoTranslate'
];
let includeTranslation = [];

var googleTranslation = {
    init: function() {
        for (var i = 0; i < excludeTranslation.length; i++) {
            $(excludeTranslation[i]).addClass("notranslate");
        }
        for (var i = 0; i < includeTranslation.length; i++) {
            $(includeTranslation[i]).addClass("translate");
        }
        new google.translate.TranslateElement({
            pageLanguage: pageSourceLang,
            // includedLanguages: 'en,es,ar,ru,de,it,fr,zh-CN,zh-TW,ro,pt', uncomment to onlyu have these specific languages
            autoDisplay: true,
            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
        }, 'google_translate_element');
    }
}

function runTranslation() {
    $.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslation.init");
}
runTranslation();

let htmlString = "<div class='dynamicNoTranslate'>(except this text)</div>"
$('#parentInsideDIVThatIsTranslated').html(htmlString);
$(".dynamicNoTranslate").addClass("notranslate");