get a div's origin height

Question

I set the div's css

height:130px;
overflow:hidden;

I want an animation from current height to origin height like this , but I can't get the origin height.one posible way is after dom loaded , store the height in js,like this

$(function(){
    $('.detail').data('originHeight',$('.detail').height());
    $('.detail').css({height:'130px',overflow:'hidden'})
})

but doing this , the div will first show all , then set height to 130px.

any suggestions?

Answer 1

Can't you expand the divs by removing the css attributes instead?

$('.detail').css({height:'', overflow:''})

Answer 2

I think thats the only way. Because if you modified the height using CSS in jQuery, the height became the modified height. And the modified height is the one that you will access.

The only possible scenario I can think of is the store the original height using jquery or maybe supply your fixed height and tell jQuery how long it would expand.

Answer 3

The method you have is the right way, but you might need some hacks to avoid the visual flicker that this will give you.

Try moving the div off-screen, checking the height and then moving it back. Also while we're here, avoid using multiple jQuery look-ups if possible $('.detail') as this can be a quite expensive operation.

var $detail = $('.detail');
$detail
    .css({position : 'absolute', left: '-10000px'})
    .data('origHeight', $detail.height())
    .css({position : '', left : '', height : '130px', overflow : 'hidden'})
;

Alternatively, if this isn't working for you, don't work against it, work with it. It might pay to consider ways to adapt it into your design, for example, by starting at its full size and then animating back to 130px. This will let you gracefully check its normal size, as well as let the user know that there's more information to be seen there.

Answer 4

I've done this before by using the element's scrollHeight property.

document.getElementById('element').scrollHeight;

this tells you how tall the element would be if the height was set to auto and overflow was enabled.