Google Web Translator Hide Frame Bar

 

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:
.goog-te-banner-frame{visibility:hidden !important;}
#body-main{top:0px !important;}

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

Google Web Translator

21 thoughts on “Google Web Translator Hide Frame Bar

  1. Dark Knight

    I am not sure where you happen to be getting your information, but good topic. I needs to spend an afternoon learning much more or understanding more. Thanks a lot for excellent info I wanted this kind of information for my personal job.

    Reply
  2. Dwijayasblog

    Thanks for your instruction, just add the code below at my blog and voile, no more google translate frame.

    .goog-te-banner-frame{visibility:hidden !important;}
    #body-main{top:0px !important;}

    Thank you.
    Keep up the good work.

    Reply
  3. Skinnybloke

    Nice one – was trying to sort this for ages.

    I also added the following to my css to hide the tooltips that were displayed on my print buttons:

    .goog-tooltip {visibility:hidden !important;}

    Reply
  4. http://yahoo.com

    I actually question precisely why you called this specific posting, “Google Web Translator Hide Frame Bar | Joshua Doodnauth’s Blog”. Regardless I really loved the blog!Thanks for your effort-Maybelle

    Reply
  5. sylvester vader

    hi good fix
    i also made something like this but i have one problem
    eventho its not shown anymore when you print the page it wil still use the space where the frame was
    im trying to remove it but sofar no succes

    somebody have ideas?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>