Detecting height of resized <div>

K

Klaus Seidenfaden

How can I reliably detect the height of a div after having resized the
window (causing the contents of the div to become reflowed)?

<div id="box">
<div id="content">
bla, bla, bla!
</div>
</div>

Assume this renders on one line. I can get the height as
getElementById['content'].offsetHeight, let's say it's 18 (px).
Then I make the window so narrow that 'content' gets reflowed
to display as:

bla,
bla,
bla!

Now I'd like to detect the new height, but .offsetHeight is still 18 - in
Opera and FF. In IE, it does show the new height (say, 36), but when
resizing back to 18, IE's .offsetHeight is stuck at 36.

Is there a way?

-- Klaus.

Here's a previous, unanswered posting (posted elsewhere) restating the
problem *and* background/purpose:
 
R

RobG

Klaus said:
How can I reliably detect the height of a div after having resized the
window (causing the contents of the div to become reflowed)? [...]
Assume this renders on one line. I can get the height as
getElementById['content'].offsetHeight, let's say it's 18 (px).

No, you can't. offsetHeight is not part of the current DOM, it
is legacy ('DOM 0') from before W3C standards.

According to the Mozilla site:

"offsetHeight gets the number of pixels that the current
element is offset within the offsetParent node"

<URL:http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html#1027994>

In other words, you are finding the distance from the top of
your element to the bottom of its offset parent, which might be
the same value as the height of the element, but likely not.

Have a read here:

Then I make the window so narrow that 'content' gets reflowed
to display as:

bla,
bla,
bla!

Now I'd like to detect the new height, but .offsetHeight is still 18 - in

Only if some element above has not re-flowed and moved this
element down the page, increasing its offsetHeight value.
Opera and FF. In IE, it does show the new height (say, 36), but when
resizing back to 18, IE's .offsetHeight is stuck at 36.

Without seeing the HTML for the entire page (or at least to
where your element is), we can only guess as to why.
Is there a way?

If you want to find the height of an element, there are several
ways:

1. obj.style.height - this will tell you what the actual height
property of the style object has been set at, either inline
or by scripting but not CSS. If style.height has not been set
by one of these methods, it is undefined.

2. the element's height attribute, however this is only
available for a limited set of elements (iframe, td, th, img,
object and applet), so it can't be used for a row.

3. via script: getCurentStyle (IE) or getComputedStyle (the
rest). However, if it has been set using something other
than px (say em or %), IE will report whatever the units it's
been set at. So if your element has its height set as %,
then that is what IE reports. If the height is not set at
all, IE reports 'auto' whereas Firefox gives the size in
pixels always.

Below is a script to let you play with things:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>blah</title>
<script type="text/javascript">
function sayWH(a) {
var txt = '';
while (!/table/i.test(a.nodeName)){
txt += theWH(a) + '<br><br>';
a = a.parentNode;
}
// txt = txt.replace(/\\n/,'<br>');
document.getElementById('report').innerHTML = txt;
}

function theWH(a) {
var msg= a.nodeName + ':';
// Check if attributes set:
if (a.height || a.width) {
msg += '<br><br>Height attribute: ' + a.height;
msg += '<br>Width attribute: ' + a.width;
} else {
msg += '<br><br>Element height/width attribute: undefined';
}

// Check if style attributes set:
if (a.style) {
msg += '<br><br>Height style attribute: ';
msg += (a.style.height)? a.style.height : 'not set';
msg += '<br>Width style attribute: ';
msg += (a.style.width)? a.style.width : 'not set';
} else {
msg += '<br><br>Style object not supported here';
}

// Zilla: getComputedStyle
if (window.getComputedStyle) {
var h = document.defaultView.getComputedStyle(a,
'').getPropertyValue('height');
var w = document.defaultView.getComputedStyle(a,
'').getPropertyValue('width');
msg += '<br><br>Using getComputedStyle (h,w): '
+ h + ', ' + w;

// IE: currentStyle
} else if (a.currentStyle) {
var h = eval('a.currentStyle.height');
var w = eval('a.currentStyle.width');
msg += '<br><br>Using currentStyle (h,w): ' + h + ', ' + w;
}
return msg;
}

function initPage(){
var d = document.getElementsByTagName('div');
var i = d.length;
while (i--){
d.onclick = function(){sayWH(this);};
}
var e = document.getElementById('aDiv');
e.style.height = '5em';
e.style.width = '35em';
}
</script>
<style type="text/css">
div {border: 1px solid red;}
..aClass {width: 20em; height: 10em;
line-height: 10em;}
#report {font-family: sans-serif; color: #666;
font-size: 90%;}
</style>
</head>
<body onload="initPage();">
<table border="1"><tr><td>
<div>This div: height and width not set at all</div>
</td></tr><tr><td>
<div class="aClass">This div: height and width set using
CSS class</div>
</td></tr><tr><td style="height: 30px; width: 400px">
<div style="width: 95%; height: 95%;">This div: height and
width attributes set using inline style and precentage<br>
<br><br></div>
</td></tr><tr><td height="20%" width="50%">
<div id="aDiv">This div: style height and width set using
script</div>
</td></tr></table>
<span id="report"></span>

</body>
</html>
 
K

Klaus Seidenfaden

If you want to find the height of an element, there are several
ways:
[...]
Below is a script to let you play with things:
[...]

Thanks, I'll take a look at your suggestions when I get the time, and
maybe I'll resurface here. :) (I actually had the feeling that
'offsetHeight' was dubious, offset hints at something distance related...)

-Klaus.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top