How can I replace 100% width in new Twitter widget with CSS code?
I currently have several Ruby on Rails applications where I am using responsive web design through media queries. I used the following CSS which overloaded the width to 100%.
#twitter-widget-0, #twitter-widget-1 {
float: none;
width: 100% !important;
font-size: 12px;
}
However, in July 2015, I noticed that Twitter widgets are no longer displayed at 100% but fixed size. I checked the Twitter developer site and saw that the Twitter widget customization is advanced. When I inspect the widget, I can see the CSS options I have in my CSS, but also see a width of 520px.
https://dev.twitter.com/web/embedded-timelines
Looking at this link, I know that I can encode parameters right in the fixed width code. Without knowing the size of the screens that anyone can use to display my web apps, I don't want to set a fixed size anywhere. Another problem is that it won't change it in my media queries.
The only link I found about setting up the current Twitter widget is below. Most of them date back to 2011-2013.
Twitter built-in timeline 100% width
The question is being asked by someone using the Twitter widget in Wordpress. The solution uses jQuery. I don't know enough Javascript to implement a Javascript or jQuery solution, so I don't know if this will 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 people said they should work.
I added the following line in application.html.erb
to fix the ReferenceError for $. I am in spite of the jquery-rails gem recognizing my code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
I created a fiddle . When I clicked JSHint and it said my code was absolutely correct. The widget is displayed with a width of 552 pixels. I'm not sure if the problem is where I have the code. I need help figuring out why my jQuery code is not serving my purpose.
Here is an iframe statement when validating a 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>
source to share
Based on Chris's answer. This has an interval that checks if the iframe is manageable. If so, it runs 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, you can dump .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: It could be argued that the above code is error prone since the iframe is loaded, but you cannot validate the loaded content. Easy to fix. It also allows you to reduce the spacing for less obvious resizing.
$(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);
});
source to share
You can customize the inline style of a div inside an iframe with jQuery using the following:
$(document).ready(function() {
$("#twitter-widget-0").contents().find(".timeline").attr("style","max-width:100% !important;");
$("#twitter-widget-0").attr("style","max-width:100% !important; width: 100% !important;");
});
source to share
here: fooobar.com/questions/1200169 / ...
This solution works for me.
Basically you need to embed some css in your iframe twitter widget.
For this example use jQuery
<style type="text/css" id="twitter-style">
.timeline { max-width: 100%; }
</style>
<script type="text/javascript">
twttr.widgets.createTimeline(
'WIDGET_ID_GO_HERE',
$('#widget-placeholder-go-here')[0],
{
chrome: 'nofooter noborders noheader' //optional
}
).then(function(el) {
$(el).contents().find('head').append($('#twitter-style'));
});
</script>
source to share
Please note that individual inline tweets differ from inline time frames.
To set the width to 550px or less, you can simply add the width data attribute to the element blockquote.twitter-tweet
.
For one inline tweet and using jQuery, this helped to set the tweets to 100% container width:
$('iframe.twitter-tweet')
.css('width', '100%')
.css('max-width', '100%')
.contents().find('.EmbeddedTweet').css('max-width', 'none');
It sets every iframe width to 100% and then removes max-width
in every .twitter-tweet
div inside every iframe content.
Edited 2016/1/13: Twitter changed CSS tweets again
source to share