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.
- 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).
- The CSS class of the Translator toolbar is: .goog-te-banner-frame
- Add this to your css file:
#body-main{top:0px !important;}[/css]
And that’s it. I just used !important to keep the toolbar quiet and hidden.
You just save my life! Good post.
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.
Great, it works for firefox and chrome, but not for ie.. could you provide css solution for ie? thanks.
Dude,you are genius, THANK YOU!!
You could also try the following solution: http://easierthan.blogspot.com/2011/11/code-tip-1-more-than-one-translation.html which removes the frame completely. Useful if you want your customers to be able to easily print the translated pages.
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.
yes, that is awesome! thank you for the tip!
Simple put this code in the head tag
good solution dude ….but not perfect
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;}
Thanx a lot and really a good code.
I got this code very helpful for one of my client website. Thanks a lot for this code
GREAT POST!!! IT WORKED!!!
Waow!
Great! u r awesome dude.
thanks.. 🙂 JSDOODNAUTH
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
Hey man, you are genius, trying to remove header for last two days but no luck. Thank you very much
Good Wrk
Hi and thanks for this info and the snippet. Helped me.
I have long searched for it.
Cheers
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?
Hi Josh –
Nice post! Funny I was fiddling around and came up with exactly this fix this afternoon. But there is another problem. The popup list of languages is too wide for mobile. It seems that they set the width of the iframe too wide and then set the body and some other elements inside the iframe as overflow hidden. I could use JS to update the iframe width and overflow properties but not elements inside of it.
Any ideas about that?
Kurt
Hi and thanks for this info and the snippet. Helped me. Thanks..