CSSDesignDevelopmentHTML

Google Web Translator Hide Frame Bar

By March 4, 2011March 21st, 201423 Comments

I had a requirement from a client that they wanted their site to have the ability to be instantly translated.  The cheapest and best solution I could think of was the Google Web Translator.  It is another great script from the people at Google, it can quickly (and fairly accurately) translate your page to some 50+ languages.  Even better, the translation sticks as you navigate the site, so there is no need to hit the translate button every time you move to a different page.

A down side (which was an issue brought up by the client, but I don’t really mind), is that the native language is first loaded, then that content is bounced to Google for translation, then bounced back and the DOM is rerendered with the translation.  It takes a second or two, but the results fit the requirement, plus its FREE!

Implementation

Implementation is simple, goto the Google Translate Tools, select the type of translate element, language of your page, select some display options, and boom! The script is ready for you to put on your site/page.

The display I went for was the Inline Dropdown, its the smallest and most flexible,  and that “Powered by Google” banner with the Vertical and Horizontal options is a bit too much of Google branding, and simply just takes up too much space.

Remove Frame/Toolbar

When you click a different language a toolbar pops up at the top of the page with a Google Translate logo, a translation status, and the option to show the original language.  Nice to have, but it can be a little intrusive depending on the site.  I tried some JavaScript to hide it, but I think the way it works, is that it gets rendered after DOM is ready, and the content has to be sent to Google.  It may even render while sending the Translation updates. In any event the JavaScript gets fired at the wrong time, I didn’t try the jQuery .ready with the impression that it would still fire once, and at the wrong time.

The Fix:

CSS! Two things to consider, first is that the toolbar is in an iframe, second is that it moves the body down 40px.

  1. Add an ID to your main body tag, if you don’t have one already (and not to screw with any other iframe body tags you are not supposed using).
  2. The CSS class of the Translator toolbar is: .goog-te-banner-frame
  3. Add this to your css file:
[css].goog-te-banner-frame{visibility:hidden !important;}
#body-main{top:0px !important;}[/css]

And that’s it.  I just used !important to keep the toolbar quiet and hidden.

Google Web Translator

23 Comments

Leave a Reply to Erick Cancel Reply