Twitter嵌入时间线100％宽度 [英] Twitter embedded timeline 100% width

问题描述

我有一个嵌入Twitter的时间表，在此页面上运行。

通过CSS，我添加了以下类：

  .twitter-timeline {
 min- width：100％！important; 
  

直到昨天，这个CSS成功地将时间轴扩展到内容区域的全宽，今天的风格不工作。

我可以看到Twitter在iframe中运行下面的样式：

  .timeline {
 max-width：520px; 
  

我假设这是Twitter最近添加的内容。有什么我可以做覆盖这吗？我试过添加以下到我的CSS类，但它没有工作：

  .twitter-timeline {
 min-width：100％！important; 
 width：100％！important; 
  

我知道我可以利用Twitter API来创建自定义Feed，无法访问艺术家Twitter帐户以生成访问令牌等。

解决方案

如上所述twitter当前不允许其时间轴小部件以获得100％的宽度。对于响应网站，这是一个痛苦，但有一个解决方案（现在）。

使用回调在twitter嵌入脚本，并指向一个函数，改变iframe

替换您的twitter嵌入代码（在< a> 标记）。

 < script& 
！function（d，s，id）{var js，fjs = d.getElementsByTagName（s）[0]，p = / ^ http：/。test（d.location）？'http'：'https '; 
 if（！d.getElementById（id））{
 js = d.createElement（s）; js.id = id; 
 js.src = p +：//platform.twitter.com/widgets.js; 
 js.setAttribute（'onload'，twttr.events.bind（'rendered'，function（e）{responsiveTwitterWidget（）}）;）; 
 fjs.parentNode.insertBefore（js，fjs）; 
}}（document，script，twitter-wjs）; 
 
 function responsiveTwitterWidget（）{
 var widget = $（＃twitter-widget-0）; 
 var frame_style = widget.attr（'style'）; 
 widget.attr（'style'，frame_style +'max-width：none！important; width：100％'）; 
 if（widget）{
 var head = widget.contents（）。find（head）
 if（head.length）{
 head.append（'< style> .timeline {max-width：100％！important; width：100％！important;} .timeline .stream {max-width：none！important; width：100％！important;}< / style& ; 
} 
 widget.append（$（'< div class = timeline>'））; 
} 
} 
< / script> 
  

如果页面上有多个时间轴小部件，则需要进行调整。

可能无法在某些较旧的IE浏览器上使用。

I have a Twitter embedded timeline running on this page.

Via CSS, I've added the following class:

.twitter-timeline {
     min-width: 100% !important;

Up until yesterday, this CSS was successfully extending the timeline to the full width of the content area, but today the style does not work.

I can see that Twitter have the following style running within the iframe:

.timeline {
     max-width: 520px;

I assume this is something that Twitter have added recently. Is there anything I can do to overwrite this? I've tried adding the following to my CSS class, but it hasn't worked:

.twitter-timeline {
     min-width: 100% !important;
     width: 100% !important;

I'm aware that I can tap into the Twitter API to create a custom feed, but we do not have access to the artists Twitter account to generate access tokens etc.

解决方案

As mentioned twitter currently does not allow for its timeline widget to get 100% width. For responsive sites this is a pain but there is a solution (for now).

Use a callback on the twitter embed script and point it to a function that alters the iframe styles.

Solution Using Jquery

Replace you twitter embed code (under the <a> tag) with this.

            <script>
                    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
                        if(!d.getElementById(id)){
                            js=d.createElement(s);js.id=id;
                            js.src=p+"://platform.twitter.com/widgets.js";
                            js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {responsiveTwitterWidget()});");
                            fjs.parentNode.insertBefore(js,fjs);
                        }}(document,"script","twitter-wjs");

                    function responsiveTwitterWidget(){
                        var widget = $("#twitter-widget-0");
                        var frame_style = widget.attr('style');
                        widget.attr('style', frame_style + ' max-width:none !important; width:100%');
                        if(widget) {
                            var head = widget.contents().find("head")
                            if (head.length) {
                                head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');
                            }
                            widget.append($('<div class=timeline>'));
                        }
                    }
                </script>

Adjustments would need to be made if more than one timeline widget on a page.

May not wont work on some older IE browsers.

这篇关于Twitter嵌入时间线100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！