Detecting Google Chrome Translation

Question

I've added the Google Translation Bar to our website but due to how the layout works if the translation on the main navigation is longer than English is pushes some links down to the next row and starts to cover up other elements. I've got some Javascript that detects if the translation bar is in use and makes the containing div for the menu and search box wider to compensate, while this does affect the layout it is by far preferable to covering parts of the page.

However Chrome now has translation built in to the browser, if someone uses this they obviously won't be using the embedded version and so I can't detect it to apply my width fix. Is there any way to detect if Chrome's built in translation is being used?

Answer 1

Maybe try using js to detect if menu content has changed and then apply new styles.

UPDATE

When Chrome translates a page it adds several elements to a page:

• two script elements to head tag
• global object window.google
• class = "translated-ltr" to html tag
• div id="goog-gt-tt" to body tag

You can watch for changes in DOM to find out when content is translated:

document.addEventListener('DOMSubtreeModified', function (e) {     if(e.target.tagName === 'HTML' && window.google) {         if(e.target.className.match('translated')) {             // page has been translated          } else {             // page has been translated and translation was canceled         }    } }, true); 

Answer 2

I know this is way late... and it's not a JS solution... but if you just need to be able to ensure you can style elements on your page when the Google Translate bar is being displayed, you can use CSS. The Translate code adds a class of "translated-ltr" (or "translated-rtl" if the language is right-to-left and not left-to-right like English) to the body tag.

So you can use CSS classess like:

.translated-ltr .nav, .translated-rtl .nav {} 

substituting the correct class/ID for your items as needed.

Hope this helps!