Detecting Google Chrome Translation
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
scriptelements toheadtag - global object
window.google class = "translated-ltr"tohtmltagdiv id="goog-gt-tt"tobodytag
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);
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!
As of 2019 the selected answer above doesn't seem to entirely work, however I have been able to use the following modified version to track the class name changes to the <html> element (document.documentElement) when translate or "Show Original" is used:
var observer = new MutationObserver(function (event) { if(document.documentElement.className.match('translated')) { alert("Page translate"); } else { alert("Page untranslate"); }});observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'], childList: false, characterData: false});However it's important to note that this will trigger at the beginning of page translation, before the individual content has actually been changed.
If you need to perform an action which depends on the characteristics of the translated text (e.g. to check if it now overflows a div), then you would need to track changes on elements with text content to see if they have actually been translated, while also using the above code to set a flag to determine whether the change is a result of a translation, or a reversion to the original text.