Geek Answers Handbook

Built-in Twitter timeline 100%

I have a built-in Twitter timeline on this page .

Through CSS, I added the following class:

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

Until yesterday, this CSS has successfully extended the timeline to the full width of the content area, but today the style does not work.

I see that Twitter has the following style running in iframe:

.timeline {
     max-width: 520px;

I guess this is what Twitter has added recently. Is there anything I can do to rewrite this? I tried adding the following to my CSS class, but it did not work:

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

I know that I can use the Twitter API to create a custom feed, but we don’t have access to the Twitter user account to create access tokens, etc.

+4
source share
9 answers

, 100% . , ( ).

twitter embed script , iframe.

JQuery

( <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.

+6

.

CSS

iframe[id^='twitter-widget-0'] {
     height:600px !important;
     margin-bottom:10px !important;
     width:100% !important;
}

Javascript

$(window).on('load', function () {
   $('iframe[id^=twitter-widget-]').each(function () {
      var head = $(this).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>');
          }
          $('#twitter-widget-0').append($('<div class=timeline>'));
   })
});

.

https://wordpress.org/support/topic/how-can-create-full-width-twitter-timeline-on-responsive-page

+1

: $('.twitter-timeline').css({width: '100%'});

+1

, Twitter publish.twitter.com - , iOS, ( ) ).

javascript, = 100% , , CSS ( , , )., ):

.twitter-timeline { width: 100vw !important; }

, , , , ( ):

<meta name="viewport" content="width=device-width, initial-scale=1">

, " " iOS.

+1

javascript.

jQuery:

$("iframe[id^='twitter-widget-']").contents().find(".timeline").css("maxWidth", "none");
0

css iframe, .

 <script type="text/javascript">
    $(window).load(function () {
        function changeWidget() {
            var twFrame = $('iframe#twitter-widget-0');
            if (twFrame.length > 0) {
                twFrame.contents()
                .find('head').append('<link href="http://www.w3schools.com/css/mystyle.css" rel="stylesheet" type="text/css" media="all" />');
            } else {
                setTimeout(changeWidget, 1500);
            }
        }
        changeWidget();
    });
</script>

css, :

 .timeline{
    max-width: 100% !important;
}
0

Javascript

$(document).ready(function() {
  window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function(f) {
      t._e.push(f);
    };

    return t;
  }(document, "script", "twitter-wjs"));

  twttr.ready(function(twttr) {
    $(".tweet").each(function() {
      twttr.widgets.createTweet($(this).data("id"), $(this)[0], {cards: "hidden"}).then(function(el) {
        $(el).contents().find('.EmbeddedTweet').css('max-width', '800px');
      }); 
    });
  });
});

HTML

<div class="tweet" data-id="705128887810965504"></div>
0

, data-width data-height <a class="tweeter-timeline"

<div class="col-xs-12 col-md-2...">
    <a class="twitter-timeline">...</a>
0

iFrame CSS.

<body onload="onLoad()">

<script>

function onLoad() {
    var twitter_iframe = document.getElementById('twitter-widget-0');
    var twitter_document = twitter_iframe.contentDocument || twitter_iframe.contentWindow.document;
    var twitter_timeline = twitter_document.getElementsByClassName("timeline-Widget")[0];
    twitter_timeline.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
}

</script>

Note. Obviously, this may stop working if they set up their JS, but the good news is that it won’t break your page or something like that, it just goes back to not having a 100% width.

Edit:

I made a more reliable attack on this, since twitter sometimes loads after calling body onLoad. The following approach will also capture them in almost all cases:

    function onLoad() {
        resizeTwitterFeed();
        setTimeout(function(){ resizeTwitterFeed(); }, 100);
        setTimeout(function(){ resizeTwitterFeed(); }, 250);
        setTimeout(function(){ resizeTwitterFeed(); }, 500);
        setTimeout(function(){ resizeTwitterFeed(); }, 750);
        setTimeout(function(){ resizeTwitterFeed(); }, 1000);
        setTimeout(function(){ resizeTwitterFeed(); }, 2000);
        setTimeout(function(){ resizeTwitterFeed(); }, 3000);
        setTimeout(function(){ resizeTwitterFeed(); }, 5000);
        setTimeout(function(){ resizeTwitterFeed(); }, 10000);
    }

    function resizeTwitterFeed() {

        var twitter_iframe = document.getElementById('twitter-widget-0');
        if (twitter_iframe) {
            var twitter_document1 = twitter_iframe.contentDocument;
            if (twitter_document1) {
                var twitter_timeline1 = twitter_document1.getElementsByClassName("timeline-Widget")[0];
                if (twitter_timeline1) {
                    twitter_timeline1.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
                }
            }

            var twitter_document2 = twitter_iframe.contentWindow.document;
            if (twitter_document2) {
                var twitter_timeline2 = twitter_document2.getElementsByClassName("timeline-Widget")[0];
                if (twitter_timeline2) {
                    twitter_timeline2.style = "left:0;right:0;margin:auto;padding:auto;min-width:100%;";
                }
            }

            twitter_iframe.onload = function() {
                resizeTwitterFeed();
                return true;
            }
        }

    }
0
source

More articles:


All Articles