用于响应式布局的两个Google Translator小部件

Question

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

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

Answer 1

创建两个容器divs一个用于“普通”布局，另一个用于“移动”布局(或者更多，取决于您正在做什么)。让小部件在“正常”布局的容器中启动。添加一些JavaScript来监听窗口的宽度。如果它低于某个断点(768px或更低、480px或更低等)，请将小部件移动到另一个容器div。

我已经完成了这项工作-但是小部件本身没有响应，所以你将不得不处理一个新的语言问题，这些语言不适合在视窗中。

希望这能有所帮助。

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

Answer 3

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

#google_translate_element img
{
width: auto !important;
}

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