Question

I have the following jQuery code that finds out the width of container and then tells a child element to be a certain size (minus the size of the sidebar) so that it will fill the screen.

It works fine EXCEPT when the user changes the browser window it doesn’t update! So I need the jQuery code to work in realtime. Can anyone help? Thanks

$(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

Move the code to a separate function and have it run both on the document ready and window resize events:

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);
}