Google переводчик верхняя панель скрыть

Я использую переводчик Google для моего сайта. Я хочу, чтобы скрыть верхнюю панель переводчика Google, дайте мне знать, как я могу скрыть это?

Пожалуйста, проверьте ссылку на мой сайт здесь http://www.rewords.com/ и дайте мне знать, чтобы я скрыл этот бар?

Спасибо

10 ответов

Сделано через CSS:

.goog-te-banner-frame.skiptranslate {display: none !important;} 
body { top: 0px !important; }

Некоторые изменения в ответе Джейкоба. Попробуйте написать,

<style type="text/css">iframe.goog-te-banner-frame{ display: none !important;}</style>
<style type="text/css">body {position: static !important; top:0px !important;}</style>

Это решит проблему.

Элемент тела попадет в поток - со статическим. Тогда вы можете правильно использовать отображение ни одного.

  body {top: 0px !important; position: static !important; }
    .goog-te-banner-frame {display:none !important}

Используя некоторый код из KDawg, добавив margin-top и абсолютное позиционирование, я обнаружил, что это дополнение к CSS является решением для позиционирования только скрытого баннера перевода, который появляется только после выбора языка.

Это решение не влияет на расположение кнопки перевода или выбора языка, который остается на фиксированном заголовке.

} iframe.goog-te-banner-frame {
    position:absolute;
    margin-top:30px;

Скрыть, добавив javascript к событию onload своего тела

document.getElementsByTagName("frameset")[0].rows="0,*;

Мы можем добиться этого с помощью CSS. Просто введите код CSS в теге стиля. Это оно..!

.goog-te-banner-frame.skiptranslate {
        display: none !important;
    } 
    body {
        top: 0px !important; 
    }

Если кто-то хочет, чтобы JavaScript выполнял эту работу, добавьте приведенный ниже фрагмент в свой документ.ready

if(document.getElementsByClassName('goog-te-banner-frame skiptranslate')[0] !== undefined) {
  document.getElementsByClassName('goog-te-banner-frame skiptranslate')[0].style.display  = 'none';
  document.body.style.top = '0px';
}

Как это работает: Google загружает панель инструментов в iframe с классом "goog-te-banner-frame skiptranslate" и добавляет 40px поле в верхней части HTML-тела. Таким образом, мы скрываем этот фрейм и устанавливаем поле body в '0px'.

Примечание. См. Требования к атрибуции, выполненные Google https://cloud.google.com/translate/attribution

На данный момент предложенные здесь решения правильно скрывают панель, но страница остается смещенной на 40 пикселей вниз, скрывая нижний колонтитул и нижнюю часть основного фрейма.

Подумав о перехвате события изменения тела, чтобы найти высоту полосы и поместить ее в качестве дополнения к моему телу, сохраняя полосу видимой. Тем не менее, я нашел довольно легкое решение, добавив одну строку к самой требуемой функции Google, поскольку кажется, что TranslateElement заставляет положение тела быть относительным, что делает бесполезным установку CSS body{position.

HTML

      <head>
  <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage:'en'},'google_translate_element');
      document.body.style.position="static"; /* << to counter overwriting by google func */
      document.body.style.top="0px";         /* << force body pos here if not in CSS     */
    }
  </script>
  ...
</head>

и просто продолжайте использовать изменения стиля, которые некоторые из вас уже предложили, спасибо.

CSS

      body > .skiptranslate { display: none; }        /*     << /!\ hides the bar     */

Я предполагаю, что следующим шагом Google будет также принудительное использование body{top, поэтому я предпочитаю использовать его в вызове JS их функции.

попробуй это

      .skiptranslate iframe  {
visibility: hidden !important;
    } 
body{
    top:0!important;
    
}

Я пробовал несколько способов, и один из них помог мне решить проблему.

      body {
    top: 0px !important;
}
body > .skiptranslate {
    display: none !important;
}
Другие вопросы по тегам