|
|
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
|
|
|
|
Ah this is a problem I cam across. Technically as long as you set the Height of the element before hand, then set it's display to hidden the element will still retain it's properties.
However the DOM acts weirdly on external stylesheets, and there's problems between browsers. My first post had a problem that delt with this as well.
Here's an example that I've tried at works;
<html>
<head>
<style type="text/css">
#test{height:100px;display:none;}
</style>
<script language=javascript>
//returns a property value in IE and NS6 Format
function getProperty(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
[ return elstyle.getPropertyValue(csspropertyNS)
}
}
function showHeight(element){
heightString = getProperty(document.getElementById("test"),"height","height");
alert(heightString);
}
</script>
</head>
<body>
<div id="test">Test</div>
<a href="#" onClick="showHeight('test');">show hidden height</a>
</body>
</html>
|
|
The top function basically drags out the information regardless of browsers as Firefox and IE deal with getting CSS values differently. Then the second element just outputs the value. You'll see in this example the output is "100px" just do a split on the string if you want to get just the numeric value;
elementHeight = parseInt(heightString.split("px")[0]);
|
|
Obviously in this example I used pixels, if you used em or % then replace the "px" with that.
|
|
|
|
|
|
|
|
i69alot
