Question

15

Detecting Google Chrome Translation

rated 0 times [ 18] [ 3] / answers: 1 / hits: 15251 / 14 Years ago, thu, february 3, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karivictoriab

Add To Favorites

Follow

Total Points: 530

Total Questions: 90

Total Answers: 95

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

karivictoriab questions

1 JSX props should not use arrow functions eslint warning

Wed, Feb 10, 21, 00:00, 3 Years ago

1 How to scroll and expand an Accordion by onClick on an icon from a component?

Fri, Aug 21, 20, 00:00, 4 Years ago

1 Hide all labels and tooltips in Chart.js and make it very small size

Wed, Apr 8, 20, 00:00, 4 Years ago

1 CORS – Cross Origin Request Blocked – The 'Access-Control-Allow-Origin' header contains invalid value

Fri, Jan 24, 20, 00:00, 4 Years ago

1 VueJs clear form after success

Mon, Dec 30, 19, 00:00, 4 Years ago

View All

answered 14 Years ago jamir · Accepted Answer

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);