Have Geek Brain

Get the height of the origin of a div

I have set the div css

height:130px;
overflow:hidden;

I need an animation from the current height to the start height like this , but I can't get the start height. One possible way after the dom is loaded store the height in js, for example

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

but with this the div will show everything first and then set the height to 130px.

any suggestions?

0


a source to share


4 answers


I've done this before using the element property scrollHeight

.

document.getElementById('element').scrollHeight;


this tells you how tall the element is if the height was set to auto

and overflow

.

+1


a source


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

Try moving the div out of the screen by checking the height and setting it back. Also, while we are here, avoid using multiple jQuery variants if possible $('.detail')

, as this can be quite an expensive operation.



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

Alternatively, if it doesn't work for you, don't work with it, work with it. It might pay to consider ways to adapt it to your design, such as starting at its full size and then animating back to 130px. This will allow you to gracefully check its normal size and also inform the user that there will be more information there.

+3


a source


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

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


a source


I think this is the only way. Because if you changed the height with CSS in jQuery, the height became the changed height. And the changed height is the one that you will have access to.

The only possible scenario I can think of is keeping the original height using jquery, or perhaps supplying a fixed height and telling jQuery how long it will take to expand.

0


a source






More articles:


All Articles