Styling the New Twitter Widget (Embedded Timeline)

How to customize twitter widget style?

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

You can change the Chrome of the widget, to hide the header/footer/border or background.

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="<YOUR ID>" data-theme="dark" data-link-color="#000" data-chrome="noheader nofooter noborders transparent"  data-related="twitterapi,twitter" data-aria-polite="assertive" width="300" height="300" lang="EN">Tweets by @twitterapi</a>

How Can I Replace 100% Width in the New Twitter Widget Using CSS code?

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/

Related Topics