用于响应式布局的两个谷歌翻译小部件答案

【问题标题】：Two Google Translator Widget for Responsive Layout用于响应式布局的两个谷歌翻译小部件
【发布时间】：2014-04-11 08:03:35
【问题描述】：

我最近遇到了一个问题，即在我的网页中再添加一个 GoogleTranslator 小部件。我做了一些研究，显然谷歌不允许在模板中使用多个谷歌翻译小部件。

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

【问题讨论】：

标签： responsive-design widget google-translate

【解决方案1】：

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

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

希望对您有所帮助。

【讨论】：

正如我所说，即使我更改了 id 名称，我也无法使用另一个块。那就是问题所在。无论如何，我设法通过一些媒体查询对其进行了不同的样式设置，并且只调用了一次 GTranslator api。同一页面上的两个小部件没有解决方案。
我的解决方案没有多个小部件，它是一个小部件，但我们根据窗口的尺寸使用 JavaScript 将其移动到新的容器元素中。因此，在您的移动布局中，小部件的父元素将是#Parent_1，如果您将窗口放大到全屏（或到下一个断点），我们的脚本会移动它，使其父元素为#Parent_2。我让它在 3 个网站上成功运行，所以我知道它有效。无论如何，听起来您已经找到了一种使用 CSS 完成所需工作的方法，这是 IMO 更好的解决方案。您应该发布您的解决方案，以便您可以帮助他人。

【解决方案2】：

在快速搜索我刚刚回答的网站上可能重复的问题时发现了这篇文章，但是会发布一个答案，以防其他人最终在这里寻求解决方案。

跳转到解决方案：http://jsfiddle.net/melfy/15zr6ov0/

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

Is there any way for more than one Google Translate widget to be loaded on a page

小提琴代码包含（使用 jquery）：

<!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>

【讨论】：

【解决方案3】：

这对我有用。将以下内容添加到您的 CSS：

#google_translate_element img
{
width: auto !important;
}

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

【讨论】：