为移动网站设计 Google 翻译小部件的样式 [英] Styling Google Translate widget for mobile websites

问题描述

我的网站 - www.forex-central.net - 在每个页面的右上角都有谷歌翻译下拉小部件.

My website - www.forex-central.net - has the Google Translate drop-down widget on the top right of every page.

唯一的问题是它对于我的网站(5 厘米)来说有点太宽了，我需要一个 4 厘米的版本(我在其他网站上看到过，所以我知道这是可能的)...但我不知道如何调整代码.

Only problem is it's a bit too wide for my website (5 cm), I would need a 4 cm version (which I've seen on other sites so I know this is possible)...but I have no idea how to tweak the code.

Google 为我使用的小部件提供的代码是:

The code Google supplies for the widget I use is:

<script type="text/javascript">function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', gaTrack: true, layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element');}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 

任何帮助将不胜感激！我有点新手，已经在这方面搜索了几个小时，但一无所获:-/

Any help would be greatly appreciated! I'm a bit of a novice and have searched for hours on this, not getting anywhere :-/

推荐答案

这样的事情会让你开始:

Something like this will get you started:

.goog-te-menu-frame {
    max-width:100% !important; //or whatever width you want
}

但是，您还需要执行以下操作:

However, you would also need to do something like:

.goog-te-menu2 { //the element that contains the table of options
    max-width: 100% !important;
    overflow: scroll !important;
    box-sizing:border-box !important; //fixes a padding issue
    height:auto !important; //gets rid of vertical scroll caused by box-sizing
}

但第二部分实际上无法完成，因为翻译界面作为 iframe 包含在您的页面中.幸运的是，它没有自己的域，所以我们可以通过 Javascript 访问它像这样:

But that second part can't actually be done because the translate interface is included in your page as an iframe. Fortunately, it doesn't have its own domain, so we can access it via Javascript like this:

$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css(
    {
        'max-width':'100%',
        'overflow':'scroll',
        'box-sizing':'border-box',
        'height':'auto'
    }
)

但是那个在元素实际存在之前不会起作用(它被异步加载)所以我们必须将它包装在我在这里得到的东西.把它们放在一起，你会得到这个:

But that won't work until the element actually exists (it's being loaded asynchronously) so we have to wrap that in something that I got here. Put it all together, you get this:

function changeGoogleStyles() {
    if($('.goog-te-menu-frame').contents().find('.goog-te-menu2').length) {
        $('.goog-te-menu-frame').contents().find('.goog-te-menu2').css(
            {
                'max-width':'100%',
                'overflow':'scroll',
                'box-sizing':'border-box',
                'height':'auto'
            }
        )
    } else {
        setTimeout(changeGoogleStyles, 50);
    }
}
changeGoogleStyles();

呸.

您可以使用相同的策略将其他样式应用于翻译框，或者更改表格样式以使其垂直流动而不是在屏幕外水平滚动，无论如何.请参阅此答案.

You can use that same strategy to apply other styles to the translate box or perhaps alter the table styles to have it flow vertically instead of scroll horizontally offscreen, whatever. See this answer.

即使这个也不起作用，因为每次您点击下拉菜单时，Google 都会重新应用这些样式.在这种情况下，我们尝试更改 height 和 box-sizing，但 Google 会重新应用这些，而 overflow 和 max-width 棒.我们需要的是将我们的样式放在不会被覆盖的地方，并添加 !importants [cringes].内联样式可以解决这个问题(我还用一个变量替换了我们的选择器，以保持简洁，并且性能提升可能可以忽略不计):

Even this doesn't work, because Google re-applies the styles every time you click the dropdown. In this case, we try and change height and box-sizing, but Google reapplies over those, while overflow and max-width stick. What we need is to put our styles somewhere they won't get overriden and add !importants [cringes]. Inline styles will do the trick (I also replaced our selector with a variable for succinctness and what is likely a negligible performance boost):

function changeGoogleStyles() {
    if(($goog = $('.goog-te-menu-frame').contents().find('body')).length) {
        var stylesHtml = '<style>'+
            '.goog-te-menu2 {'+
                'max-width:100% !important;'+
                'overflow:scroll !important;'+
                'box-sizing:border-box !important;'+
                'height:auto !important;'+
            '}'+
        '</style>';
        $goog.prepend(stylesHtml);
    } else {
        setTimeout(changeGoogleStyles, 50);
    }
}
changeGoogleStyles();

这篇关于为移动网站设计 Google 翻译小部件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！