2011-02-03 6 views
9

Google 번역 바를 Google 웹 사이트에 추가했지만 기본 탐색의 번역이 영어보다 길면 레이아웃이 어떻게 작동하는지에 따라 일부 링크가 다음 행으로 넘어 가서 은폐되기 시작합니다 다른 요소. 전환 막대가 사용 중인지 감지하고 메뉴와 검색 상자를 포함하는 div를 보정하는 데 필요한 몇 가지 자바 스크립트가 있습니다. 레이아웃에 영향을 미치지 만 페이지의 일부를 덮는 것이 훨씬 낫습니다.Google 크롬 번역 검색

그러나 Chrome에서 브라우저에 번역 기능이 내장되어 있습니다. 누군가이 기능을 사용하면 분명 내장 버전을 사용하지 않으므로 내 너비 수정을 적용 할 수 없습니다. Chrome의 번역본이 사용되는지 여부를 감지 할 수있는 방법이 있습니까?

+0

나는 또한 이것에 실제로 흥미가있다. 어떻게하는지 알아 냈어? – whitehawk

+0

@whitehawk 아래에 추가 된 내 의견보기 – Chao

답변

13

아마도 js를 사용하여 메뉴 내용이 변경되었는지 감지 한 다음 새 스타일을 적용 해보십시오.

UPDATE

크롬이 페이지에 몇 가지 요소를 추가하는 페이지로 변환 할 때 :

  • script 요소 태그 head에를
  • 전역 객체 window.google
  • class = "translated-ltr"html 태그
  • div id="goog-gt-tt"

태그 body에 당신은 내용을 번역 할 때 알아 DOM의 변화를 볼 수 있습니다 :

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

정확히 무엇을하지는 않았지만 가장 가까운 해결책입니다. jQuery resize plugin http://benalman.com/projects/jquery-resize-plugin/을 사용하여 변화하는 내용을 감지하는 대신 크기가 변하는 메뉴를 감지했습니다. – Chao

+0

매우 고맙습니다, 정말 고마워요! – BairDev

+0

Google 크롬의 기본 제공 번역 기능의 경우 세 번째 및 네 번째 방법 만 작동하는 것 같습니다. 또한 번역 된 언어에 따라'번역 된 -rr '이'번역 된 -rtl'이 될 수 있다고 가정합니다. 나는 여전히 약간 주저합니다.하지만 클래스 이름 만 사용하는 것을 고려하면 쉽게 달라질 수 있습니다. – Knelis

2

나는이 방법 늦게 알아 ... 그리고 그것은 JS 솔루션이 아니다 .. 하지만 Google 번역 바가 표시 될 때 페이지의 요소 스타일을 지정할 수 있도록하려면 CSS를 사용할 수 있습니다. Translate 코드는 body 태그에 "translated-ltr"(또는 언어가 오른쪽에서 왼쪽이고 영어와 같이 왼쪽에서 오른쪽으로 쓰이지 않으면 "translated-rtl") 클래스를 추가합니다. 필요에 따라 항목에 대한 올바른 클래스/ID를 대체

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

:

그래서 당신은 같은 CSS의 수업을 통해 사용할 수 있습니다.

희망이 도움이됩니다.