1

I have been reading and trying to solve this problem, but I can't find a solution.

I'm trying to get the height of a div, to update another div's height and make cool jQuery animations. It's all triggered by an ajax request (which works ok).

Here is a live example

I don't know how to get the height of the #bigBox, because it always return 0.

edited

All the soloutions worked, but they didn't do what I expected. I need to calculate the height after the #bigBox fade out.

Finally I managed to do it.

I change the class .toToggle to the div #bigBox, instead of beeing in it's parent div. This was done to avoid the parent beeing display: none;. Now the same element is hidden, so it works

Here is the final solution

Thank you all! :D

alanszp
  • 13
  • 1
  • 7

2 Answers2

2

You are hiding it before taking the height, so when you take the height it will be '0'.

try this instead:

var height = $("#bigBox").height();
$(".toToggle").fadeOut(600, "swing",function(){

    alert(height);

    $(".toToggle").fadeIn(500);
});

see fiddle.

Tomer
  • 17,787
  • 15
  • 78
  • 137
  • I get the height after the animation begins, because when the div fade out, the content of the div changes... That's why I need to get the height, tnx anyway! – alanszp Mar 10 '13 at 22:11
0

Hidden elements have no height, by definition. You'll need to, for example, position it absolutely and offscreen (see below), show it, get its height, and hide it again.

.offscreen { display: block; position: absolute; left: -999em; }

Update: After looking more closely at your demo, why not just get the height before your animation begins?

http://jsfiddle.net/97Xx5/5/

var height = $("#bigBox").height();

$(".toToggle").fadeOut(600, "swing", function () {
    alert(height);

    $(".toToggle").fadeIn(500);
});
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • I get the height after the animation begins, because when the div fade out, the content of the div changes... That's why I need to get the height :D – alanszp Mar 10 '13 at 22:11
  • Then you'll need to re-work your function to have explicit steps, one of which must leave the element visible and offscreen like I described. – isherwood Mar 10 '13 at 22:40