Why doesn't this javascript (jquery) function seem to work?

Question

I have a nightmare with a simple function!

I want him to:

• read the height of the div with the existing content in it
• Refresh div with new content (provided by function)
• Read the height that the div should be, but set it to its original height.
• Animate the height of the div to customize and set new content.

The code is as follows:

// function to display status content by animating the height of the status message function slideStatus(content){ // get current height var status_origheight = $("#status-message").height(); // insert new content $("#status-message").html(content); // get new height var status_newheight = $("#status-message").height(); // set the height to the orig value, hiding overflow content $("#status-message").height(status_origheight).css("overflow","hidden"); // animate the div to the new height $("#status-message").animate({height:"+="+(status_newheight - status_origheight)+""}, 1000); } 

When I run this, it seems to ignore the fact that the content has changed, and just use the original height (so don't do the animation because it thinks the height hasn't changed).

Please help if you can! It drives me crazy.

Answer 1

Work for me. Your mistake is most likely in a different place ... http://jsfiddle.net/6aBfD/

UPDATE

http://jsfiddle.net/6aBfD/3/

But this only works once. The problem is that you rely on the element to set its own height and read from it. But after the first run, you fix the height to a certain value. The updated link has the correct working code, click it several times. I added the following:

 $("#status-message") .css("overflow","visible") .css("height", "auto"); 

Now, when you read the height, it will be the natural height. Then set oveflow and height again to lock it to what you want.

Answer 2

Rob

Try the following instead of .height ():

var status_origheight = $("#status-message").css('height');