Finding the height of a div without displaying it

[kael.shipman]

Hey everyone,

 

Any ideas on how I might determine the height of a div without actually displaying it? I've got a div that I'm putting dynamic content into and I need to slide it out (like a rolldown effect), but to do that I need to know how much space the new content takes up. The way I'm currently doing that is like so:

 

function() {
var box = document.getElementById('divId');
box.style.height = '';
//box.style.height is initially set to '0px', so setting it to an empty string allows it to adjust to fit the content

var ht = box.offsetHeight;
box.style.height = '0px';

rollFunction('divId', 0, ht); //call roll function to roll "divId" from 0px to {ht}px
}

 

The problem with that is that now I get a big flash of the content before it rolls smoothly down.

 

Solutions?

 

Thanks in advance,

Kael

[phpQuestioner]

would have to take a look at you full script to say for sure about the flash, but your checking for the div height accurately.

[emehrkay]

Dom elements have a few height/width attributes - regular height and width which you can access with offsetHeight and offsetWidth and scrollHeight and scrollWidth

 

here is an example

 

<div id="test" style="width: 200px; height: 200px; overflow: hidden;">

<div style="width: 400px; height: 200px">some content</div>

</div>

 

//js

var test = document.getElementById('test');

test.offsetHeight; //200px

test.offsetWidth; //200px

test.scrollWidth;// 400px <--this is what you are looking for, the size of the content in the element

test.scrollHeight;// 400px

[kael.shipman]

Holy crap! Genius! I don't know why I didn't think of that.... Thanks a lot!

 

-kael