jQueryでの可変対応について教えて下さい
今、添付画像のようなコメントエリア付きのサムネイル一覧を作っています。
ソースは以下です。
< li class="span4 prd-box">
< img src="common/images/sample_img.jpg" alt="sample_img" class="">
< div class="detail">
< p class="date">13.11.29< /p>
< p class="comment hidden-phone">ここにコメントが入ります。< /p>
< /div>
< /li>
クラス名【detail】で黒い帯の部分を制御しています。
このサイトはレスポンシブになっており、可変するのですが、可変させると黒い帯の幅がずれてしまいます。
更新すればもちろん直りますが、リアルタイムに追従してくれません。
jQueryで幅の取得は出来ますが、それをリアルタイムな可変に対応させらせません。
CSSでもJSでもなにかよい方法があればアドバイスを頂きたいです。
よろしくお願いします。
No.1
CSSでは対応難しそうですかね。jQueryのresizeイベントを拾って書き換える、というのもいいかもしれないですね。
$(window).on('resize',function(){
$('.detail').width($('.prd-box img').width());
});
.resize() | jQuery API Documentation
動作確認は一切していません。
1
1
丁寧なご回答いただきありがとうございます。
2013/12/09 10:29:03お陰様で予定通りの動きを組むことが出来ました。
とっても助かりました。ありがとうございます。ベストアンサーとして登録させて頂きます。