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 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.
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:
And that’s it. I just used !important to keep the toolbar quiet and hidden.
17 Comments + Add Comment
Got anything to say? Go ahead and leave a comment!
- Too scared to write a line of code zite.to/11g9Meg #Programming 22 hours ago
- 3 Top Responsive Web Design Traps You Should Avoid zite.to/12TDLgi via @zite 22 hours ago
- Backbone.js for large scale applications – UI Architecture orizens.com/wp/topics/back… #Backbone 1 day ago
- RT @MoveableOnline: Beyond The Button: Embracing The Gesture-Driven Interface - ow.ly/lnc95 1 day ago
- The Right Way to Retinafy Your Websites | Nettuts+ net.tutsplus.com/tutorials/html… #Retina #CSS 2 days ago