0

同様の div を使用したレスポンシブ レイアウトがあり、Jquery を適用して、すべての div がより多くのコンテンツを持つ div の高さに一致するようにします。ただし、ブラウザー ウィンドウのサイズを変更する場合、すべての div はページが読み込まれたときと同じ高さのままで、テキストが div からはみ出します。ユーザーがブラウザ ウィンドウのサイズを変更するたびに、何らかの方法で Jquery を実行し続ける方法はありますか?

私が達成しようとしていることをより説明的にするには、テキストコンテンツと属性 width: #%; を持つ通常の div として div を (ブラウザーウィンドウの rezise で) 動作させることです。高さ: 自動; 唯一の違いは、すべての div がより大きな高さの div の高さと一致することです。

ここに私が持っているもののリンクがあります: http://as.sjsu.edu/cf/vaishak/equalizeTest/index.html

最大の高さを取得するために最初に必要なJqueryは次のとおりです。

<script>
jQuery(function(){
var maxHeight = 0;
$(".box").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".box").height(maxHeight);
});
</script>

これは、ウィンドウのサイズ変更時にまだ正しく機能しない更新バージョンです。

$(document).ready(function(){
    $(window).resize(function(event) {
        resizeDiv();
    });
    $(document).ready(function(){
        resizeDiv();
    });
    function resizeDiv(){
        var maxHeight = 0;
        $(".box").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".box").height(maxHeight);
    }
    });

どんな助けでも大歓迎です！

4

3 に答える 3

1

これがイベントリスナーの目的です。たとえば、コードを関数に入れnormalizeBoxHeight()、ブラウザのサイズが変更されたとき (および最初の読み込み時) に呼び出すことができます。

次のようになります。

jQuery(function(){

    var normalizeBoxHeight = function(){
        var maxHeight = 0;
        $(".box").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".box").height(maxHeight);
    }

    $(window).resize(normalizeBoxHeight);
    normalizeBoxHeight();

});
于 2013-05-02T18:33:32.597 に答える