All geek questions in one place

How to download Google Translate?

I have google translate on my page. It looks like a drop-down list, but all the other drop-down lists on my page have a different style. So I created a jQuery function that changes the drop-down styles of Google Translator. This function adds or removes some style options. I would like to know when should I call this feature? In the current code, I call it after 3 seconds. after document.ready

$(document).ready(function () { setTimeout(wrapGoogleTranslate, 3000); });

The current situation is that I hide the Div where the Google translation is located, and show it after the styles are corrected by my function. This means that my page loads, then it waits 3 seconds, and then Google Translate appears with the corrected styles.

I would like to know how I can determine that the Google Translate popup menu has been loaded, and then call my function to change the style. I don’t want users to wait 3 seconds (maybe in some situations Google Translate will load for more than 3 seconds, then my function will never be executed).

+4
source share
3 answers

I recently wanted to change the "Select Language" to just "Language", so I also had to run the code after the Google code was executed. Here is how I did it:

HTML

It’s important that the Google div be display:none - we will fade out using JavaScript so that the user does not see the text switching from “Select Language” to “Language”.

 <div id="google_translate_element" style="display:none;"></div> <script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-35158556-1'}, 'google_translate_element');}</script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Javascript

 function changeLanguageText() { if ($('.goog-te-menu-value span:first-child').text() == "Select Language") { $('.goog-te-menu-value span:first-child').html('Language'); $('#google_translate_element').fadeIn('slow'); } else { setTimeout(changeLanguageText, 50); } } changeLanguageText();
+6
source

I had a similar situation when I had to change the "Select Language" to just display "Language". Here is my CSS solution:

 div#google_translate_element{ display: inline-block; vertical-align: top!important; } div#google_translate_element *{ margin: 0px; padding: 0px; border: none!important; display: inline-block; vertical-align: top!important; } div#google_translate_element .goog-te-gadget-icon{ display: none; } div#google_translate_element .goog-te-menu-value{ color: #899290; } div#google_translate_element .goog-te-menu-value:hover{ color: #a6747e; } div#google_translate_element .goog-te-menu-value *{ display: none; } div#google_translate_element .goog-te-menu-value span:nth-child(3){ display: inline-block; vertical-align: top!important; } div#google_translate_element .goog-te-menu-value span:nth-child(3)::after{ content: "Language"!important; }
+1
source

You can do this with pure JavaScript. The W3 docs for the onLoad attribute indicate that you can add the attribute to the HTML element, which takes as a parameter JavaScript code to execute when the element loads.

The problem is that the attribute is only supported for a few elements that: -

  • <body>
  • <frame>
  • <frameset>
  • <iframe>
  • <img>
  • <input type="image">
  • <link>
  • <script>
  • <style>

So, I would recommend going with an <iframe> or <frame . Now it should look something like this:

 <frame onLoad="wrapGoogleTranslate();" />

Or else you can try this with jQuery:

 $("div#googleTranslateWrapper").load(function() { setTimeout(wrapGoogleTranslate, 3000); });

Here is the documentation for jQuery load method

-2
source

Source: https://habr.com/ru/post/1446046/

More articles:


All Articles