Two Google Translator Widget for Responsive Layout

问题

I recently faced an issue for adding one more GoogleTranslator widget in my web page. I did some research apparently Google won't allow more than one GoogleTranslator widget in template.

Does anyone have experienced the same issue? Is there any solution? In responsive Design I need to duplicate some blocks and use them in different orders.

回答1:

Create two container divs - one for your "normal" layout, one for your "mobile" layout (or more, depending on what you're doing). Have the widget start out inside of the "normal" layout's container. Add some JavaScript to listen to the width of the window. If it's under a certain break point (768px or less, 480px or less, etc.), move the widget to the other container div.

I've had this work for me - however the widget itself isn't responsive, so you'll have to deal with a new issue of the languages not fitting in the viewport.

Hope that helps.

回答2:

Found this post while doing a quick search for what is possibly a duplicated question on the site that I just answered, however will post an answer incase someone else ends up here for a solution.

Jump to solution: http://jsfiddle.net/melfy/15zr6ov0/

More details and code on my another stack overflow response:

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

Fiddle code contains (with 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:

This worked for me. Add the following to your CSS:

#google_translate_element img
{
width: auto !important;
}

You may have to rename the container based on what's in your structural code.

来源：https://stackoverflow.com/questions/23006908/two-google-translator-widget-for-responsive-layout

标签

responsive-design

widget

google-translate