Have tried nearly all the Scripts at this Post Implementing Google Translate with custom flag icons
But none of them was working for me. This one works for switching between Languages, but fails at reseting Google Translate to defaults. Click "EN" then back to "DE". Clicking "EN" again does not Translate the Page.
What am i missing?
var _gto;
// will be called after Google Translate SDK has been loaded successfully
function googleTranslateElementInit() {
_gto = new google.translate.TranslateElement({
defaultLanguage: 'de',
pageLanguage: 'de',
includedLanguages: 'de,en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false
}, 'google_translate_element');
}
$('.lang-item').on('click', function (e) {
e.preventDefault();
var $menuframe = $('.goog-te-menu-frame:first'),
// Google iframe that will be invoked, after user has selected an language
$bannerframe,
// button reference to reset language to default
$bannerframerestore,
langcode = $(this).data('lang');
// therefore it is neccassary to catch the element delayed
setTimeout(function () {
$bannerframe = $('.goog-te-banner-frame');
$bannerframerestore = $bannerframe.contents().find('.goog-close-link');
// restore to default
if ($(e.currentTarget).hasClass('default')) {
$bannerframerestore[0].click();
}
}, 500);
$menuframe.contents().find('a span.text:contains("' + _gto.K[langcode] + '")').click();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="google_translate_element"></div>
<ul class="lang-list">
<li><a href="#" class="lang-item default" data-lang="de">DE</a></li>
<li><a href="#" class="lang-item" data-lang="en">EN</a></li>
</ul>
<h1>Verkauf</h1>
<h2>SALE</h2>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>