Responsive design 两个Google Translator小部件，用于响应布局_Responsive Design_Widget_Google Translate

Responsive design 两个Google Translator小部件，用于响应布局

responsive-design

Responsive design 两个Google Translator小部件，用于响应布局,responsive-design,widget,google-translate,Responsive Design,Widget,Google Translate,我最近遇到了一个问题，在我的网页中添加了一个GoogleTranslator小部件。我做了一些研究，显然谷歌不允许在模板中有超过一个GoogleTranslator小部件有没有人经历过同样的问题？有什么解决办法吗？在响应式设计中，我需要复制一些块并以不同的顺序使用它们。创建两个容器div-一个用于“正常”布局，一个用于“移动”布局（或更多，取决于您正在做什么）。让小部件从“正常”布局的容器中开始。添加一些JavaScript来监听窗口的宽度。如果它在某个断点下（768px或更低，480px或更

我最近遇到了一个问题，在我的网页中添加了一个GoogleTranslator小部件。我做了一些研究，显然谷歌不允许在模板中有超过一个GoogleTranslator小部件

有没有人经历过同样的问题？有什么解决办法吗？在响应式设计中，我需要复制一些块并以不同的顺序使用它们。

创建两个容器div-一个用于“正常”布局，一个用于“移动”布局（或更多，取决于您正在做什么）。让小部件从“正常”布局的容器中开始。添加一些JavaScript来监听窗口的宽度。如果它在某个断点下（768px或更低，480px或更低，等等），则将小部件移动到另一个容器div

我已经完成了这项工作-但是小部件本身没有响应，因此您必须处理一个新问题，即不适合视口的语言

希望能有所帮助。

这对我很有效。将以下内容添加到CSS中：

#google_translate_element img
{
width: auto !important;
}

您可能必须根据结构代码中的内容重命名容器。

在快速搜索我刚才回答的站点上可能重复的问题时找到了此帖子，但如果其他人到这里寻求解决方案，您将发布答案

跳转到解决方案：

有关我的另一个堆栈溢出响应的更多详细信息和代码：

Fiddle代码包含（使用jquery）：


谷歌翻译
这是一个标题
这是一些应该翻译的文本
这是你的页脚
//存储google translate的更改事件
trackChange=null；
pageDelayed=3000；
//将原型覆盖到snoop，在找到它后重置（在translate init之前保留此项）
Element.prototype.\u addEventListener=Element.prototype.addEventListener；
Element.prototype.addEventListener=函数（a、b、c）{
重置=错误；
//筛选出第一个更改事件
如果（a==‘更改’）{
轨道变化=b；
重置=真；
}
如果（c==未定义）
c=假；
这一点。_添加了列表器（a、b、c）；
如果（！this.eventListenerList）
this.eventListenerList={}；
如果（！this.eventListenerList[a]）
this.eventListenerList[a]=[]；
this.eventListenerList[a].push（{listener:b，useCapture:c}）；
如果（重置）{
Element.prototype.addEventListener=Element.prototype.\u addEventListener；
}
};
函数googleTranslateElementInit（）{
新的google.translate.TranslateElement（{pageLanguage'en'}，'google_translate_element'）；
让我们先=$（“#谷歌翻译#元素”）；
让第二个=$（'google#u translate_element2'）；
让我们改变=错误；
//我们需要让它加载，因为它将在页脚中，一个小的延迟应该不是问题
setTimeout（函数（）{
select=first.find（'select'）；
//让我们克隆翻译选择
html（first.clone（））；
second.find（'select'）.val（select.val（））；
//添加我们自己的事件更改
首先，查找（'select'）。打开（'change'，函数（事件）{
if（nowChanging==false）{
second.find（'select'）.val（$（this.val（））；
}
返回true；
});
第二，查找（'select'）。打开（'change'，函数（事件）{
如果（正在更改）{
返回；
}
nowChanging=true；
首先.find（'select'）.val（$（this.val（））；
trackChange（）；
//给它一些超时时间，以防不断变化的事件试图相互碰撞
setTimeout（函数（）{
nowChanging=false；
}, 1000);
});
}，页面延迟）；
}

正如我所说，即使我更改了id名称，我也不能使用其他块。这就是问题所在。无论如何，我设法用一些媒体查询来改变它的风格，只调用了一次GTranslatorAPI。在同一个页面上没有两个小部件的解决方案。我的解决方案没有多个小部件，它是一个小部件，但我们根据窗口的维度使用JavaScript将其移动到一个新的容器元素。因此，在您的移动布局中，小部件的父元素将是#父元素#1，如果您将窗口放大到全屏（或下一个断点），我们的脚本将移动它，使其父元素为#父元素#2。我已经成功地在3个网站上运行，所以我知道它是有效的。无论如何，听起来你已经找到了一种使用CSS做你需要的事情的方法，在我看来这是一个更好的解决方案。你应该发布你的解决方案，这样你就可以帮助别人了。

<!DOCTYPE html 

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Google Translate</title>
</head>

<body>

    <div id="header" style="background-color: #ddd;">
        <div id="google_translate_element"></div>

        This is a header

    </div>

    <p> This is some text that should be translated </p>


    <div id="footer" style="background-color: #ddd;">
        This is your footer

        <div id="google_translate_element2"></div>
    </div>


<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<script type="text/javascript">

// store google translate's change event
trackChange = null;
pageDelayed = 3000;

// overwrite prototype to snoop, reset after we find it (keep this right before translate init)
Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(a,b,c) {
  reset = false;

  // filter out first change event
  if (a == 'change'){
    trackChange = b;
    reset = true;
  }

  if(c==undefined)
    c=false;

  this._addEventListener(a,b,c);

  if(!this.eventListenerList)
    this.eventListenerList = {};

  if(!this.eventListenerList[a])
    this.eventListenerList[a] = [];

  this.eventListenerList[a].push({listener:b,useCapture:c});

  if (reset){
    Element.prototype.addEventListener = Element.prototype._addEventListener;
  }
};


function googleTranslateElementInit() {
  new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');

  let first = $('#google_translate_element');
  let second = $('#google_translate_element2');

  let nowChanging = false;

  // we need to let it load, since it'll be in footer a small delay shouldn't be a problem
  setTimeout(function(){
    select = first.find('select');
    // lets clone the translate select
    second.html(first.clone());
    second.find('select').val(select.val());

    // add our own event change
    first.find('select').on('change', function(event){
      if (nowChanging == false){
        second.find('select').val($(this).val());
      }
      return true;
    });

    second.find('select').on('change', function(event){
      if (nowChanging){
        return;
      }

      nowChanging = true;
      first.find('select').val($(this).val());
      trackChange();

      // give this some timeout incase changing events try to hit each other                    
      setTimeout(function(){
        nowChanging = false;
      }, 1000);

    });
  }, pageDelayed);
}
</script>

</body>

</html>