CODEWITHSUNDEEP
jquery
Cameron
Cameron

Reputation: 28793

jQuery find out element width even when browser window changes size

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

});

Upvotes: 1

Views: 875

Answers (2)

Michał Wojciechowski
Michał Wojciechowski

Reputation: 2490

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

Upvotes: 1

Skylar Anderson
Skylar Anderson

Reputation: 5703

You just need to bind this to $(window).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();

});

Upvotes: 3

Related Questions