匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

1386416704 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でもなにかよい方法があればアドバイスを頂きたいです。
よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/12/07 20:45:04
  • 終了:2013/12/09 10:29:11

ベストアンサー

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/12/08 15:30:32

 CSSでは対応難しそうですかね。jQueryのresizeイベントを拾って書き換える、というのもいいかもしれないですね。

$(window).on('resize',function(){
    $('.detail').width($('.prd-box img').width());
});

.resize() | jQuery API Documentation
 動作確認は一切していません。

匿名質問者

丁寧なご回答いただきありがとうございます。
お陰様で予定通りの動きを組むことが出来ました。

とっても助かりました。ありがとうございます。ベストアンサーとして登録させて頂きます。

2013/12/09 10:29:03
  • 匿名回答1号
    匿名回答1号 2013/12/08 09:33:43
     補足をお願いします。
     
    >黒い帯の幅がずれてしまいます
    ・どちらにずれるのでしょうか、大きくなるのでしょうか小さくなるのでしょうか。
    ・どのようなデバイスで見ると正しく表示されるのでしょうか。そのメディアクエリCSSでの.detail指定はどうなっていますか。
    ・ずれるスクリーンサイズのメディアクエリCSSでの.detail指定はどうなっていますか。
     
     なぜずれるのかが分からないと対応は難しいかと思います。ソースを見るのが一番話が早いと思うのですが。
  • 匿名質問者
    匿名質問者 2013/12/08 10:29:08
    コメントありがとうございます。
    .span4 {
    background-color: white;
    position: relative;
    padding:10px;
    }
    .detail{
    background-color: black;
    bottom: 10px;
    height: 42px;
    left: 10px;
    position: absolute;
    width: auto;
    }

    このような状態です。
    ずれる時というのは、幅を変えた時です。コーディングにはMacのCODAを使ってるのですが、
    ページを開いた時はずれてません。

    しかし、プレビューやブラウザで画面を拡大させれば帯が短くなり、縮小させれば帯が飛び出してしまう等状態です。
    画像がはれないので、言葉だけになってしまいますが。。。

    ずれる理由は、画面の可変に対して、.detailのwidthがリアルタイムに変化してくれないことです。
    一度ずらしておかしくなっても更新をすればその幅に合わせて帯はぴったり直ります。
    imgの幅に合わせて.detailの幅をリアルタイムに変更させたいというのが望みです。

    もし、なにかよいアドバイスございましたら宜しくお願いいたします。
  • 匿名回答1号
    匿名回答1号 2013/12/08 11:29:54
     メディアクエリ使ってないんですね。
     うーん、CSSだけではなくて、なにかJavaScriptを使ってるような気がするんですが、いかがでしょうか?
     そうだとすると、そっちを修正しないとダメだと思うんですよね。
     
     もしCSSだけでレイアウト構成しているなら、.detail に right:0px; を追加するとどうなりますか?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません