How Can I Get The Height Of A Hidden <div>?

[i69alot]

Hi:

I'm having some trouble with hiding and showing/animating divs. Given that

1) the number of divs is dynamic, it changes with each web page, AND

2) the amount of content on each div, and therefore the height of each is also dynamic

The trouble is, in order to show/animate a div the way I want, i need to know the height of any of these given divs *before* i show it. Assuming one such div is currently not in view, for example,

document.getElementById('some_div').style.display = 'none';

Is there any way I can get its height without displaying it or setting visibility to hidden? as it stands right now,

document.getElementById('some_div').style.height = 0;

because its display is set to 'none'. Can I somehow get the expanded (display = 'block') height of this div while its display is set to 'none'?

Any advice would be great. Thanks for all your help.


i69

[Trinithis]

The following should be able to get the height without showing the div or moving content around while getting it. (Aka: setting the visibility to hidden won't visually do anything.)
You could probably make the function more concise, but I don't feel like making a test page to do so.


function getHeight(el) {
var s = el.style;
var v = s.visibility;
var p = s.position;
var d = s.display;
s.visibility = "hidden";
s.position = "absolute";
s.display = "block";
var h = (parseInt(s.height)>0)? s.height: el.height;
s.display = d;
s.position = p;
s.visibility = v;
return h;
}

getHeight(document.getElementById("MrTiddles"));