Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make an Reset button for Google translate

i'm using Google translate on my site, with the option not to show te topribbon or be rdirected to Google translate when translating the page to to another language. Now if i choose to show the top ribbon then in this ribbon there is an Reset button to show original language, but now when i'm not showing this ribbon there is no way to show original language except to choose my language fron the dropdown list, but if i do this it will be a translation on a translation if you know what I mean? so some words will show wrong. So what i want is an Reset button that i can but in the code i use for the Google translate dropdown list:

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

      jQuery('.goog-logo-link').css('display', 'none');
      jQuery('.goog-te-gadget').css('font-size', '0');
   }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<style type="text/css">
.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;
}
iframe.goog-te-banner-frame {
   display: none !important;
}
body {
   position: static !important; top:0px !important;
}
</style>
like image 923
Patrik Idén Avatar asked Jul 15 '13 12:07

Patrik Idén


People also ask

How do I change the google translate button?

To customize google translate button/select, use the id #google_translate_element . Then the select tag to customize select option.


1 Answers

Even though you styled the ribbon away, it is still present in the DOM. You can use jQuery to fake a click on the (hidden) reset button:

jQuery('#\\:1\\.container').contents().find('#\\:1\\.restore').click();

Unfortunately I cannot demonstrate it with a Stack Snippet ('allow-same-origin' does not work when sandboxed), but this fiddle works:
https://jsfiddle.net/xpvt214o/239032/

like image 194
Ruud Helderman Avatar answered Sep 28 '22 12:09

Ruud Helderman