Twitterの埋め込みタイムラインがどうやってもパーセント指定でサイズを変えられなかった。

in #programming7 years ago

変えられなかったので、力技で解決した。
もっとうまい解決方法ないの?
きっとあるんでしょ?
これで親要素の40%のHeight、90%のWidthになってる。
data-widthとdata-haightにピクセルで指定してやらないといけないのがやっかい。

  • JavaScript
$(window).load(function(){
    responsiveTwitterWidgetSize('#twitter');
});

function responsiveTwitterWidgetSize(parent_element){
    var parent_height = $(parent_element).height();
    var parent_width = $(parent_element).width();
    
    var widget_height = parseInt(parent_height) * 0.4; //任意の数字でかける、今回は40%にしたかった
    var widget_width = parseInt(parent_width) * 0.9; //任意の数字でかける、今回は90%
    var twiter_tag = '<div class="twitter-embed">'
                + '<a class="twitter-timeline" data-width="'+widget_width+'" data-height="'+widget_height+'" 
                + 'href="https://twitter.com/TwitterDev>Tweets by TwitterDev</a>'
                + '<script async src="//platform.twitter.com/widgets.js" charset="utf-8">'
                + '</script>'
                + '</div>'
    $(parent_element).append(twiter_tag);
}
  • Html
<div id="twitter">
</div>
Sort:  

Congratulations @mun! You have received a personal award!

2 Years on Steemit
Click on the badge to view your Board of Honor.

Do not miss the last post from @steemitboard:
SteemitBoard World Cup Contest - Semi Finals - Day 1


Participate in the SteemitBoard World Cup Contest!
Collect World Cup badges and win free SBD
Support the Gold Sponsors of the contest: @good-karma and @lukestokes


Do you like SteemitBoard's project? Then Vote for its witness and get one more award!

Congratulations @mun! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 3 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!