jQueryはブラウザウィンドウのサイズが変更されても要素幅を調べる

Question

コンテナの幅を見つけて、特定のサイズ（サイドバーのサイズを引いたもの）になるように、次のjQueryコードがあります。画面を埋める。

ユーザーがブラウザウィンドウを変更しても更新されない場合を除いて正常に動作します。したがって、jQueryコードがリアルタイムで動作する必要があります。誰も助けることができますか？ありがとう

$(document).ready(function() { 

    // find out the width of the page 
    var pageWidth = $('div.MainContentHolder').width(); 
    // minus the sidebar and margin width 
    var middleWidth = pageWidth - '220'; 
    // apply the new width to the middle column 
    $('div.MiddleColumn').css('width', middleWidth); 

}); 

Answer 1

は、別の関数にコードを移動し、それが document readyと window resizeイベントの両方を実行してい

：。

function resizeElements() { 
    // find out the width of the page 
    var pageWidth = $('div.MainContentHolder').width(); 
    // minus the sidebar and margin width 
    var middleWidth = pageWidth - '220'; 
    // apply the new width to the middle column 
    $('div.MiddleColumn').css('width', middleWidth); 
} 

$(document).ready(function() { 
    resizeElements(); 
    $(window).resize(resizeElements); 
} 

Answer 2

これを$（ウィンドウ）.resize（）にバインドするだけです。

$(document).ready(function() { 

    $(window).resize(function() { 
     // find out the width of the page 
     var pageWidth = $('div.MainContentHolder').width(); 
     // minus the sidebar and margin width 
     var middleWidth = pageWidth - '220'; 
     // apply the new width to the middle column 
     $('div.MiddleColumn').css('width', middleWidth); 
    }).resize(); 

});