Twitter встроенная временная шкала 100% ширина

Question

У меня есть встроенная временная шкала Twitter, работающая на this page.

Via 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; 

Я знаю, что я могу подключиться к API Twitter, чтобы создать собственный канал, но мы не имеем доступа для пользователей Twitter Twitter для создания токенов доступа и т. д.

Answer 1

Как уже упоминалось щебет в настоящее время не позволяет его временной шкалы виджета, чтобы получить ширину 100%. Для чувствительных сайтов это боль, но есть решение (на данный момент).

Использовать обратный вызов в скрипте embed twitter и указывать его на функцию, которая изменяет стили 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.

Answer 2

Вам необходимо использовать javascript.

Вот решение с JQuery:

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

Answer 3

Вы можете добавить внешний CSS файл в твиттере фрейма, фон должен меняться на светло-голубой с этим примером.

<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; 
} 

Answer 4

Это работает для меня.

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

Answer 5

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> 

Answer 6

простой и работает: $('.twitter-timeline').css({width: '100%'});