How to customize google-translate on my site?

Question

How to customize google-translate on my site?

Navigation

#1 by (3 votes)

3

How to put images of language flags, and when you click on the flag, the whole content of the site changes language?

I'm using this code:

html:

<div id="google_translate_element" class="boxTradutor"></div>

JavaScript:

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'pt', includedLanguages: 'en,pt', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Is there a way to place banners instead of select fields?

Code I get in: link

javascript google google-translate

asked by anonymous 26.08.2015 / 20:59

1 answer

Which component to use in PyQt4 to display records of an SQL query on the screen? Bootstrap - Trying to centralize a nav (not navbar)

score 3 · Answer 1

When you run the code on the page it generates HTML in this approximate format:

<div id="google_translate_element">
    <div class="skiptranslate goog-te-gadget" dir="ltr">
        <div id=":0.targetLanguage">
            <select class="goog-te-combo">
                <option value="">Selecione o idioma</option>
                <option value="af">africâner</option>
                <option value="ar">árabe</option>
            </select>
        </div>Powered by 
        <span style="white-space:nowrap">
            <a class="goog-logo-link" href="https://translate.google.com" target="_blank">
                <img src="https://www.google.com/images/logos/google_logo_41.png"width="37px" height="13px" style="padding-right: 3px">Tradutor
                </a>
            </span>
        </div>
    </div>

Then you will have to first hide the combo with CSS:

#google_translate_element {
    display: none;
}

And with javascript you can change the value of the combo by creating icons that are flags for example.

Complete Code

See that there is a function called trocarIdioma , it does the magic, just copy the HTML below and paste on a page and run via Apache ( http://localhost )

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #google_translate_element {
        display: none;
    }
    /*
    .goog-te-banner-frame {
        display: none !important;
    }
    body {
        position: static !important;
        top: 0 !important;
    }
    */
    </style>
</head>
<body>
    <div id="google_translate_element" class="boxTradutor"></div>

    <a href="javascript:trocarIdioma('es')"><img alt="espanhol" src="images/es.png"></a>
    <a href="javascript:trocarIdioma('en')"><img alt="ingles" src="images/en.png"></a>

    <p>Olá, mundo!</p>


    <!-- O Javascript deve vir depois -->

    <script type="text/javascript">
    var comboGoogleTradutor = null; //Varialvel global

    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
            pageLanguage: 'pt',
            includedLanguages: 'en,es',
            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
        }, 'google_translate_element');

        comboGoogleTradutor = document.getElementById("google_translate_element").querySelector(".goog-te-combo");
    }

    function changeEvent(el) {
        if (el.fireEvent) {
            el.fireEvent('onchange');
        } else {
            var evObj = document.createEvent("HTMLEvents");

            evObj.initEvent("change", false, true);
            el.dispatchEvent(evObj);
        }
    }

    function trocarIdioma(sigla) {
        if (comboGoogleTradutor) {
            comboGoogleTradutor.value = sigla;
            changeEvent(comboGoogleTradutor);//Dispara a troca
        }
    }
    </script>
    <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></body></html>

IfyouwantthetopGoogleTranslatetoolbartoaddup(whichIdonotrecommend,asIfinditrelativelyusefulwhenproblemsoccur),justremove/*and*/toactivatetherulesintheCSSIcommented,shouldlooklikethis:

<style type="text/css">
#google_translate_element {
    display: none;
}
.goog-te-banner-frame {
    display: none !important;
}
body {
    position: static !important;
    top: 0 !important;
}
</style>