Google translate widget with Semantic UI Dropdown (with flags)


I want show you how to put nice google translate widget using Semantic’s dropdown and flags.

First in HTML put code:
<div class="translatemenu item">
<div class="ui selection dropdown">
<input name="lang" type="hidden">
<i class="dropdown icon"></i>
<div class="default text"><i class="pl flag"></i>Polski</div>
<div class="menu"></div>
<div id="google_translate_element"></div>

Next in javascript create function:
function googleTranslateElementInit() {
var userLang = navigator.language || navigator.userLanguage || navigator.languages;
if (userLang.substr(0,2) != “pl”){
new google.translate.TranslateElement({pageLanguage: ‘pl’, autoDisplay: true}, ‘google_translate_element’);
var jObj = $(’.goog-te-combo’);
var db = jObj.get(0);
fireEvent(db, ‘change’);
} else {
new google.translate.TranslateElement({pageLanguage: ‘pl’, autoDisplay: false}, ‘google_translate_element’);

and somewhere in $(document).ready section set:
var translatetimeoutoption;
function updateGoogleTranslateOption(){
if($("#google_translate_element select option").length > 0){
$("#google_translate_element select option").each(function() {
var value = $(this).val();
var text = $(this).text();
$(’.translatemenu .menu’).append(’<div class=“item” data-value="’+value+’"><i class="’+(value == ‘’ ? ‘pl’ : value)+’ flag"></i>’+text+’</div>’);
var jObj = $(’.goog-te-combo’);
var db = jObj.get(0);
fireEvent(db, ‘change’);
} else {
translatetimeoutoption = setTimeout(updateGoogleTranslateOption, 100);


nice work!

here I made a JSFiddle for it

I’m linking flags.png but for some reason that’s not working in my demo, probably a path issue


on 99% is path problem.
There is another: on translated pages checkboxes doesn’t work. i’m working on it.