Get height of a DIV that changes height dynamically

Question

EXAMPLE: http://jsbin.com/ewiko4/5/

So I have some Dynamic divs that I need to figure out the height of when they change. I can get the height when the document loads but it won't update.

In the example I've added a make bigger button but irl it will be changed via jq & ajax

Yup, I can't add a callback to the animation button because it wont't be there.

Answer 1

All you have to do is call outerHeight() again:

$('#makeBigger').click(function(){
  $('#buyNow').animate({
        height: '+=10px'
  }, function() {
    var newHeight = $('#buyNow').outerHeight();
    // ...
  })
});

If you pass a function to animate() as the second argument like that, then that function will be called when the animation is complete. At that point, you can get the new height and do whatever you want with it. If the <div> changes because its content is reloaded, you'd do the same thing in the callback from the ajax routine.

Answer 2

Set Div Height

var h = $('#content').height();

Get Div Height

var h = 500;
$('#content').height(h);

http://api.jquery.com/height/

You need to find an event that is triggered when the MultiView's content is changed. Once you have that, you should be able to call a function which has the appropriate XXX.height() call. Im not familiar enough with ASP to give you specifics.

Answer 3

Take a look at this edit of your jsbin.

Couple of changes:

1. Your window events could be binded at the same time with $(window).bind('load resize', resizeFrame)

2. You want to call the resizeFrame as a callback of the animation to let it know the sizes changed...

3. If you don't have control of the animation function changing the height (as indicated by your comment) you can use a setInterval to poll the heights.

---

setInterval(resizeFrame, 150);

Would call your resizeFrame function every 150 ms. You can check the heights, see if they've changed, and do whatever you need to...