如何使用CSS代码替换新的Twitter窗口小部件中的100％宽度？ [英] How Can I Replace 100% Width in the New Twitter Widget Using CSS code?

问题描述

我目前有几个Ruby on Rails应用程序，我通过媒体查询使用响应式网页设计。我使用以下CSS代码将宽度覆盖到100％。

 ＃twitter-widget-0，＃twitter-widget-1 {
 
 float：none; 
 width：100％！important; 
 font-size：12px;但是我注意到在2015年7月，Twitter小部件不再是一个新的小部件。显示为100％但固定大小。我检查了Twitter的开发者网站，看到Twitter小部件的定制已经扩展。当我检查小部件时，我看到CSS参数，我在我的CSS，但我也看到一个宽度设置为520px。
 
 
 
  https://dev.twitter.com/web/embedded-timelines  
 
 
 
查看这个链接我知道我可以编写代码中的固定宽度的参数。不知道任何人可能用来显示我的Web应用程序的屏幕的大小我不愿意在任何地方设置固定的大小。另一个问题是，在我的媒体查询中不会改变它。
 
 
 
我找到的关于自定义当前Twitter小部件的唯一链接是下面的链接。大多数是2011-2013年。
 
 
 
  Twitter嵌入时间轴100％宽度 
 
 
 
问题是由使用Wordpress中的Twitter小部件的人提出的。该解决方案使用jQuery。我不熟悉JavaScript来实现一个Javascript或jQuery解决方案，所以我不知道它是否会为我工作。
 
 
 
  UPDATED 7/16/2015 1100 GMT-5  
 
 
 
我决定今天早上做另一次搜索，发现这链接与三个最近的jQuery解决方案，人们说他们的工作。 
 
 
 
我在 application.html.erb 中添加了以下行以更正$的ReferenceError。我虽然jquery-rails gem会识别我的代码。
 < script src =// ajax.googleapis.com/ ajax / libs / jquery / 2.0.0 / jquery.min.js>< / script> 
  
我创建了一个小提琴。当我点击JSHint，它说我的代码是完全有效的。窗口小部件的宽度为552像素。我不知道如果问题是我有代码。我需要帮助来确定为什么我的jQuery代码不能实现我的目标。
 
 
 
这里是iframe语句当我检查Twitter小部件：
 < iframe id =twitter-widget-0scrolling =noframeborder =0allowtransparency =trueclass =twitter-timeline twitter -timeline-renderedallowfullscreen =style =border：none; max-width：100％; min-width：180px; margin：0px; padding：0px; display：inline-block; position：static; visibility：visible ; width：520px; title =Twitter Timelineheight =400> 
 .......小部件语句............. 
< / iframe> 
  
 
 
解决方案
这有一个间隔，检查iframe是否可以操作。 
 
 
 
如果您有多个Twitter Feed，请使用：
 
 
 <$> p $ p>  $（document）.ready（function（）{
 twitterCheck = setInterval（function（）{
 if（$（'iframe [id ^ =twitter- （）{
 $（this）.contents（））。 .find（。timeline）。attr（style，max-width：100％！important;）; 
 $（this）.attr（style，max-width：100％ ！important; width：100％！important;）; 
}）; 
 clearInterval（twitterCheck）; 
} 
}，1000）; 
} 
  

JSFiddle： http://jsfiddle.net/v7xom6ms/20/

或者如果您有一个，您可以将 .each（）并使用：

  {
 twitterCheck = setInterval（function（）{
 var twitterFrame = $（＃twitter-widget-0）; 
 if（twitterFrame.length）{
 twitterFrame.contents （）.find（。timeline）。attr（style，max-width：100％！important;）; 
 twitterFrame.attr（style，max-width：100％！重要;宽度：100％！important;）; 
 clearInterval（twitterCheck）; 
} 
}，1000）; 
} 
  

JSFiddle： http://jsfiddle.net/v7xom6ms/21/

编辑：有人可能会认为上述代码容易失败因为iframe已加载，但您无法确认加载的内容。轻松修复。这也允许我们降低不太明显的调整大小转换的间隔。

  $（document）.ready（function 
 twitterCheck = setInterval（function（）{
 var twitterFrame = $（＃twitter-widget-0）; 
 var twitterTimeline = twitterFrame.contents（）。find（。timeline ）; 
 if（twitterFrame.length& twitterTimeline.length）{
 twitterTimeline.attr（style，max-width：100％！important;）; 
 twitterFrame .attr（style，max-width：100％！important; width：100％！important;）; 
 clearInterval（twitterCheck）; 
} 
}，10）; 
}）; 
  

http://jsfiddle.net/v7xom6ms/22/

I currently have several Ruby on Rails applications where I use responsive web design via media queries. I used the following CSS code that overrode the width to 100%.

#twitter-widget-0, #twitter-widget-1 {

  float: none; 
  width: 100% !important;   
  font-size: 12px;

}

However I noticed in July 2015 that the Twitter widgets no longer display at 100% but a fixed size. I checked the developer website of Twitter and saw that the customization of Twitter widgets has been expanded. When I inspect the widget I see the CSS parameters that I have in my CSS but I also see a width set to 520px.

https://dev.twitter.com/web/embedded-timelines

Looking at this link I know I can code the parameters right in the code with a fixed width. Not knowing the size of the screens that anyone may use to display my web applications I'm reluctant to set a fixed size anywhere. Another issue is that will not change it in my media queries.

The only link that I have found about customizing the current Twitter widget is the one below. Most of them are from 2011-2013.

Twitter embedded timeline 100% width

The question is asked by someone using the Twitter widget in Wordpress. The solution used jQuery. I am not adept enough in Javascript to implement a Javascript or jQuery solution so I do not know if it would work for me.

UPDATED 7/16/2015 1100 GMT-5

I decided to do another search this morning and found this link with three recent jQuery solutions that the people said they got to work.

I added the following line in application.html.erb to correct a ReferenceError for $. I though the jquery-rails gem would recognize my code.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

I have created a fiddle. When I clicked JSHint and it said that my code was perfectly valid. The widget appears with a width of 552px. I'm not sure if the problem is where I have the code. I need help to determine why my jQuery code is not accomplishing my goal.

Here is the iframe statement when I inspect the Twitter widget:

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; margin: 0px; padding: 0px; display: inline-block; position: static; visibility: visible; width: 520px;" title="Twitter Timeline" height="400">
.......widget statements.............
</iframe>

解决方案

Based off of Kris's answer. This has an interval that checks to see if the iframe is available to manipulate. If so it fires the code and then clears the interval.

If you have multiple Twitter feeds use this:

$(document).ready(function() {
    twitterCheck = setInterval(function() {
        if($('iframe[id^="twitter-widget-"]').length) {
            $('iframe[id^="twitter-widget-"]').each(function () {
                $(this).contents().find(".timeline").attr("style","max-width:100% !important;");
                $(this).attr("style","max-width:100% !important; width: 100% !important;");
            });
            clearInterval(twitterCheck);
        }
    }, 1000);
});

JSFiddle: http://jsfiddle.net/v7xom6ms/20/

Or if you have one you can drop the .each() and use this:

$(document).ready(function() {
    twitterCheck = setInterval(function() {
        var twitterFrame = $("#twitter-widget-0");
        if(twitterFrame.length) {
            twitterFrame.contents().find(".timeline").attr("style","max-width:100% !important;");
            twitterFrame.attr("style","max-width:100% !important; width: 100% !important;");
            clearInterval(twitterCheck);
        }
    }, 1000);
});

JSFiddle: http://jsfiddle.net/v7xom6ms/21/

Edit: One could argue that the above code is prone to fail as well since the iframe is loaded but you can't confirm the content loaded. Easy fix. This also allows us to lower the interval for a less obvious resize transition.

$(document).ready(function() {
    twitterCheck = setInterval(function() {
        var twitterFrame = $("#twitter-widget-0");
        var twitterTimeline = twitterFrame.contents().find(".timeline");
        if(twitterFrame.length && twitterTimeline.length) {
            twitterTimeline.attr("style","max-width:100% !important;");
            twitterFrame.attr("style","max-width:100% !important; width: 100% !important;");
            clearInterval(twitterCheck);
        }
    }, 10);
});

http://jsfiddle.net/v7xom6ms/22/

这篇关于如何使用CSS代码替换新的Twitter窗口小部件中的100％宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！