CODEWITHSUNDEEP
javascriptjquerycsshtml
Guido Anselmi
Guido Anselmi

Reputation: 3922

Using JQuery to Resize a Div to Match Window Dimensions

Here is the code that DOES NOT work:

(The behavior is that the div doesn't change size. Note that I am also using JScrollPane on this div. [I mean the javascript library and not the Swing component]).

function resizeDivs()
{
    alert( "BEFORE\n#page width, height: " + $('#page').css( "width" ) + "," + $('#page').css( "height" ) );
    alert( "window width, height: " + $(window).width() + "," + $(window).height() );

    $('#page').css( "width", $(window).width() );
    $('#page').css( "height", $(window).height() );

    alert( "AFTER\n#page width, height: " + $('#page').css( "width" ) + "," + $('#page').css( "height" ) ); 
}

Upvotes: 1

Views: 2475

Answers (1)

Luke Dennis
Luke Dennis

Reputation: 14550

I don't see why your code shouldn't work. You can see the very same thing work fine right here on Stack Overflow:

$("#question-header").css("width", $(window).width());

I suspect that your code is getting called before the resize event has fully completed in the browser. Perhaps you could work around this using a timer, putting this wherever your resize callback is:

setTimeout('resizeDivs()', 10);

I'd also check for other CSS/layout issues that could be interfering.

Upvotes: 4

Related Questions