読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

フェイスブック(facebook)のコメントボックスをウインドウサイズに合わせて設置する【jQquer:innerWidth】


facebookのコメントボックスをウインドウサイズに合わせて設置する【jQquer:innerWidth】

[html]<style>

content

{width:80%;}

</style>

<div id="content"> <script type="text/javascript" src="">http://www.google.com/jsapi"> <script type="text/javascript">google.load("jquery", "1.6");</script> <script type="text/javascript"> $(function() { var b = $('div#content'); var wid = b.innerWidth(); document.getElementById('fb_like_mywidth').innerHTML = '<fb:like href="<?php the_permalink() ?>" width="' + wid + '" show_faces="true" font=""></fb:like>'; document.getElementById('fb_comments_mywidth').innerHTML = '<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="2" data-width="' + wid + '"></div>'; }); </script> <div id="fb_like_mywidth"></div> <div id="fb_comments_mywidth"></div> </div>[/html]

1.innerWidth()で指定した要素の横幅をpxで取得(wid) 2.横幅を指定する箇所に wid を代入

このブログでも適用しています。

javascriptのgetComputedStyleでも横幅を取得することができますが、ChromeFirefoxでは「ウインドウサイズ*0.8」とpxで返してくれるんですが、IEではそのまんまCSSで指定した80%といった値が返ってきてしまいます。

例) ウインドウサイズ 1000px Chrome: style に返される値は800px IE: style に返される値は80%

だからNGでした。