jQuery - dynamic div height

Question

I'm trying to resize a div on pageload and window resize. The code bellow is placed before </body>, and it works fine on pageload, but does nothing on window resize. I tested the resize function with an alert, which triggers on resize, but the height remains unchanged.

<script type='text/javascript'>
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});

    $(window).resize(function(){
        $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
        alert('resized');
    });
</script>

update: after a long break, I've discovered what is causing the problem. I'm using a jquery script to add a styled scrollbar on the same div that is being resized. When I comment it out, everything resizes fine. I've moved the scrollbar initialization in the same function as resize, and tried any variations I can think of.. still can't get it to work.

(the #main-content div also has .scroll-pane class)

<script type='text/javascript'>
$(function(){
    $('#main-content').css({'height':(($(window).height())-361)+'px'});
    $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});

    $(window).resize(function(){
          $('#main-content').css({'height':(($(window).height())-361)+'px'});
    });
});
</script>

score 14 · Accepted Answer · answered Oct 17 '09 at 10:16

14

solved it!

all it needed was removing jScrollPane before calculating the height, and re-applying it.

<script type='text/javascript'>
$(function(){
    $('.scroll-pane').css({'height':(($(window).height())-361)+'px'});
    $('#main-content').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});

    $(window).resize(function(){
          $('.scroll-pane').jScrollPaneRemove();
          $('#main-content').css({'height':(($(window).height())-361)+'px'});
          $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});
    });
});
</script>

answered Oct 17 '09 at 10:16

lemon

231
1
2
7

hey, I was trying to make dynamic height for a div in my app and I used your code (I just removed the stuf about scroll-pane). :) Nice solution. – user1080533 Jan 27 '12 at 23:42
`Uncaught TypeError: $(...).jScrollPane is not a function` ... Whats `jScrollPane`? Its plugin? – KingRider Apr 24 '17 at 12:15

Vegard Larsen · Answer 2 · 2009-09-18T09:46:55.553

5

Note that the window resize function only fires once, after the window has been resized. It does not update during the resize operation, so if you are dragging the window border to test this, no changes will happen before you let go of the mouse button.

Also, make sure you do this within $(document).ready(), like this:

<script type='text/javascript'>
$(function()
{
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});

    $(window).resize(function(){
        $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
        alert('resized');
    });
});
</script>

Here is a working demo.

edited Sep 18 '09 at 09:46

answered Sep 18 '09 at 09:40

Vegard Larsen

12,827
14
59
102

thanks for clarifying the subject, but I still haven't solved the problem.. when I use your code, size adjustment doesn't work on load or on resize. I have no idea why, since your example works perfectly! if you've got any ideas as what may be interfering, please reply.. – lemon Sep 25 '09 at 12:21
@lemon, are you testing this in IE? I've had problems resizing divs with the CSS height method in IE - I *think* the solution is to define a default height for the div. – Steven Mercatante Sep 25 '09 at 17:03
The window resize event fires at different intervals depending on the browser. For (at least older versions of, in my experience) IE, it fires for every possible resize action (and then some), for Firefox it throttles events based on available resources, and for Safari it fires them consistently at regular intervals approximately 100-200ms, depending on action (it's similar to Firefox's model, but fires much less frequently). – eyelidlessness Oct 17 '09 at 09:12
Thank you so much. This helped me get rid of the horizontal jumping, which occurs when a scrollbar is needed. With this code and a bit of css I was able to remove the horizontal jumping without forcing scrollbars. – Cletus Apr 27 '12 at 17:30

score 1 · Answer 3 · answered Jan 24 '11 at 04:42

Don't execute function unless the document height is less than or equal to the window height.

$(function() {
  if($(document).height() <= $(window).height()) {
    $('#wrapper').css({ 'height': ($(window).height()) });
    $(window).resize(function(){
      $('#wrapper').css({ 'height': ($(window).height()) });
    });
  }
});

I had issues where the content would flow outside of the div.

jQuery - dynamic div height

3 Answers3

Linked