Dynamically resize a div using jQuery

Question

I have a div (id="mainDiv") which I need to dynamically resize if the user changes the size of their browser window. I have written the following code to try and get this to work however this doesn't seem to be setting the height of my div:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    var height = $(window).height(); 
    $("#mainDiv").height(height);
</script>
<body>
    <div id="mainDiv"></div>
</body>

I don't know much jQuery, am I making an obvious mistake?

This code does not run when the browser is resized. It runs immediately and never again. — js1568
– js1568, Commented Apr 8, 2013 at 20:49
you need to put your resize code in the resize function api.jquery.com/resize also make sure it is in doc ready — Huangism
– Huangism, Commented Apr 8, 2013 at 20:49
You could easily use CSS for this when using percentages because the div is the full window. — Bram Vanroy
– Bram Vanroy, Commented Apr 8, 2013 at 20:49

Lewis · Accepted Answer · 2013-04-08 21:00:27Z

There are a few things going wrong here:

Your code will execute straight away before your document has finished loading.
Your code will execute only on load of the the script, not on resize
You're not setting the height of your mainDiv - you're setting the height of another element with the id: accordianMain (but I'm guessing you know that).

You need to handle the browser resize event to wait for the browser to resize then get the dimensions of the window and apply accordingly. You'd do this by handling the window.resize event liks this:

var $win = $(window);

$win.on('resize',function(){
    $("#mainDiv").height($win.height());
});

What you probably want to do is wait for for a resize to finish to by adding a timeout so that it doesn't fire too often as well:

var timer,
    $win = $(window); 

$win.on('resize',function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        $("#mainDiv").height($win.height());
    }, 500);

});

PlantTheIdea · Accepted Answer · 2013-04-08 21:04:16Z

2

You need to wrap it in a resize function:

$(window).on('resize',function(){
    var height = $(window).height(); 
    $("#mainDiv").height(height);
});

Although I should point out what your doing could easily be attained through CSS:

body,#mainDiv {
    height:100%;
}

This is more to point out the "it needs to be in a resize event wrapper" larger point, in case you wanted to do some logic that actually needed the event.

edited Apr 8, 2013 at 21:04

answered Apr 8, 2013 at 20:49

PlantTheIdea

16.4k5 gold badges37 silver badges40 bronze badges

5 Comments

Lewis Over a year ago

Whilst I agree that the CSS is a better solution, there is no guarantee that the height:100% will work as hoped with the CSS that is being used here as the body is probably not 1005 of the window height.

PlantTheIdea Over a year ago

"the CSS that is being used here" ... there is no CSS here. With the HTML he provided, and lacking any other CSS or elements as the example does ... yes, it will work. simple examples in questions yield simple examples in solutions.

Lewis Over a year ago

What makes you think that body will be 100% height of the window?

Lewis Over a year ago

you'll need to set html, body, #mainDiv - all to be 100%

Lewis Over a year ago

Right, I'm just trying to help! That will work in JS fiddle, but try that in a full browser where the body doesn't make the full height of the window. Its not a pissing match, don't take my word for it: stackoverflow.com/questions/14151663/…

Adriano Galesso Alves · Accepted Answer · 2013-04-08 20:54:06Z

1

Yes, the mistake is use jquery hehehe

You do this with CSS

<body>
    <div id="mainDiv" style="height:100%"></div>
</body>

answered Apr 8, 2013 at 20:54

Adriano Galesso Alves

81716 silver badges22 bronze badges

Comments

js1568 · Accepted Answer · 2013-04-08 20:50:47Z

0

Use an event listener for the window resize (and you should wait for page load before accessing elements with JQuery):

$(function() {
  $(window).on('resize', function() {
    var height = $(window).height(); 
    $("#mainDiv").height(height);
  });
});

answered Apr 8, 2013 at 20:50

js1568

7,0322 gold badges30 silver badges47 bronze badges

Comments

Bahien Nguyen · Accepted Answer · 2013-04-08 20:58:14Z

0

I used div content and div footer in my page, i will set this code in my js to set dynamic height for div content.

 footer = $("div[data-role='footer']");
    content = $("div[data-role='content']");
    viewHeight = $(window).height();
    contentHeight = viewHeight - footer.outerHeight();
    contentHeight -= (content.outerHeight() - content.height());
    content.height(contentHeight);

answered Apr 8, 2013 at 20:58

Bahien Nguyen

8167 silver badges10 bronze badges

Collectives™ on Stack Overflow

Dynamically resize a div using jQuery

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related