Forum Moderators: open
Thanks!
<html>
<head>
</head>
<body
style="width:100%;overflow-x:hidden;overflow-y:scroll"
marginheight="0" marginwidth="0" leftmargin="0" topmargin="0"
onLoad="alert(document.all['divboatphoto'].style.height)">
<div id=divboatphoto>
<img name=boatphoto src="it.png">
</div>
<script>alert(document.all.[divboatphoto'].style.height)"
</script>
</body>
[/pre]
document.all.[divboatphoto'].style.height
This is not the way to call the element. Use:
document.all['divboatphoto'].style.heightor
document.all.divboatphoto.style.height(both work in MSIE) or:
document.getElementById('divboatphoto').style.height(the W3C DOM way, works in MSIE 5.5 and Mozilla).
BTW, I don't know that you can pull out the height like that on a computed value. ...
I had tried so many variations, and it looks like the answer is as you suggest; the height does not dynamically recalcullate as content is added to the div. Back to the drawing board for me.
RossWal, this works on modern browsers. I'm try to apply it with document.body.clientHeight to get the distance from a div postioned from the bottom to a top positioned div that has varying heights.
Purple_Martins method might be easier to apply in my situation.
<html>
<head>
<title>Div Height</title>
<script>
onload = function() {
if(document.getElementById) {
alert(document.getElementById('Div').offsetHeight + " px")
}
}
</script>
</head>
<body>
<div id="Div">
content<br>
content<br>
content<br>
content
</div>
</body>
</html>
function DivHeight() {
var TopOfBottomDiv = document.body.clientHeight-104;
var VariableHeightDiv = document.getElementById('changing_div').offsetHeight;
document.getElementById("test_move").style.top = TopOfBottomDiv+VariableHeightDiv;
return;
}
function DivHeight() {
var TopOfChangingDiv = document.getElementById('changing_div').offsetTop;
var HeightOfChangingDiv = document.getElementById('changing_div').offsetHeight;
document.getElementById('test_move').style.top = TopOfChangingDiv+HeightOfChangingDiv;
return;
}
In which case you may be interested one of IE's cooler 'extra' features called Dynamic Properties.
This is basically a way of embedding Javascript calculations in CSS instructions, e.g.
<div style="position:absolute;top:expression(document.body.clientHeight/2-this.clientHeight/2);left:expression(document.body.clientWidth/2-this.clientWidth/2)">centred div tag</div>
The example above creates a page centred DIV tag that dynamically repositions itself whenever it needs to. So if the user resizes the browser the DIV will centre itself accordingly without an onresize event in sight. I know this can be done with tables and the like but it's just an example.
A similar method would be an ideal solution to your problem here as you wouldn't need to worry about calling setTimeout() to setup events that wait for changes in your DIV - IE would take care of all that for you.
Here's the reference at MSDN: [msdn.microsoft.com...]
Obviously, Dynamic Properties will only work in IE5+ but they're very nice if you're lucky enough to get the opportunity to develop with them. They can do much more than dynamically alter styles and can be set up to work with any html object or property. Ideal for developing a HTML spreadsheet or similar thick application.
