Solved

Accessing row heights with the DOM.

Posted on 2004-03-27

1 solution

513 Views

Last Modified: 2013-11-19

I'm trying to have two rows - in separate tables - be equal in height. The problems are that:

a) The height tag is deprecated, so it's not a viable long term solution
b) the height is not known at runtime - it's based on the content.

I have 2 examples of code, the first doesn't work, the second one does. What I'm trying to determine is why...

This doesn't work:
http://www.pdgmedia.com/ee/dom_check1.html

function sizeRows()
{
document.getElementById('row1').height = document.getElementById('row2').offsetHeight;
}

This does work:
http://www.pdgmedia.com/ee/dom_check2.html

function sizeRows() {
var height;
document.getElementById('row1').height = document.getElementById('row2').offsetHeight;
height = document.getElementById('row2').offsetHeight;
document.getElementById('row2').height = height;
document.getElementById('row1').height = height;
}

Both are called onload:
<body onload="sizeRows();">

The table code is the same in both cases

<table cellspacing="0">
<tr>
<td>
<table id="table1" cellspacing="0">
<tr id="row1">
<td>
Data in Table One
</td>
</tr>
</table></td>
<td>
<table id="table2" cellspacing="0">
<tr id="row2">
<td>
Data in Table Two<br />
Data in Table Two<br />
Data in Table Two<br />
Data in Table Two<br />
</td>
</tr>
</table></td>
</tr>
</table>

So:

1. Why does the second example work - it seems like unecessary duplication - to the untrained eye :-)

2. Nether work in Mozilla - which is a problem.

Thanks - your input is greatly appreciated.
Sean

Comment

Question by:seanpowell

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

8 Comments

LVL 53

Expert Comment

by:COBOLdinosaur

ID: 106954672004-03-27

The offsetHeight property is a DOM element, and height is an HTML attribute, there is probabaly a data typing issue or it is possible the the first statement creates the attribute but does not populate it, because it is string datatype. Also I think height is not valid for TR you have to apply it to td.

It has no chance of working iin a standards compliant browser because there is no unit of measure.

This should work cross-browser:

H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1')
document.getElementById('row2').style.height = H+'px';
document.getElementById('row1').style.height = H+'px';

I made the assumption that you want the height of the smaller row expanded so I used the max method of the Math object to set the base height.

Cd&

LVL 53

Expert Comment

by:COBOLdinosaur

ID: 106954782004-03-27

If that does not take, you might have to force it in the td with:

H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1')
document.getElementById('row2').childNodes[0].style.height = H+'px';
document.getElementById('row1').childNodes[0].style.height = H+'px';

But it you do that put the td for the first cell in the rows on the same lin as teh tr with no spacing to prevent a phnato,m whitespace node.

Cd&

LVL 31

Author Comment

by:seanpowell

ID: 106955002004-03-27

Maybe have a peek at the source code - in case there's a typo, or I've misinterpreted your code :-)
I can't get either to behave in IE or MOZ.

Setting the height on the td:
http://www.pdgmedia.com/ee/dom_check3.html

Setting the height on the tr:
http://www.pdgmedia.com/ee/dom_check4.html

LVL 31

Author Comment

by:seanpowell

ID: 106955032004-03-27

Hold on - didn't see your last comment...

LVL 31

Author Comment

by:seanpowell

ID: 106955142004-03-27

Still no joy...
http://www.pdgmedia.com/ee/dom_cd1.html

LVL 53

Accepted Solution

by:COBOLdinosaur

COBOLdinosaur earned 500 total points

ID: 106961492004-03-27

LOL... This is a really big typo. It looks like I chop the line to fit the text area or something.

This line:
H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1')

Should be:
H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1').offsetHeight);

All one line of course.

When a change it on your first test page it resizes correctly in Moz1.6

Cd&

LVL 31

Author Comment

by:seanpowell

ID: 106961942004-03-27

Yes - that was a biggy :-)

That last fix corrected the problem. Interestingly, and as you noted, Opera (FWIW) needs the id on the <td> - it doesn't respond to the id on the <tr>.

So, the corrected code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Tables</title>

<script type="text/javascript">

function sizeRows() {
H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1').offsetHeight);
document.getElementById('row2').style.height = H+'px';
document.getElementById('row1').style.height = H+'px';
}

</script>
</head>
<body onload="sizeRows();">

<table cellspacing="0">
<tr>
<td>
<table id="table1" cellspacing="0">
<tr>
<td id="row1">
Data in Table One
</td>
</tr>
</table></td>
<td>
<table id="table2" cellspacing="0">
<tr>
<td id="row2">
Data in Table Two<br />
Data in Table Two<br />
Data in Table Two<br />
Data in Table Two<br />
</td>
</tr>
</table></td>
</tr>
</table>
</body>

Thanks Cd&, nicely done, as always.

Sean

n.b. Functions as desired in NS 6, NS 7, IE, Mozilla, Opera and Firebird.

LVL 53

Expert Comment

by:COBOLdinosaur

ID: 106962332004-03-27

I think the slight difference in opera is actually closer to the strict interpretation of the standards, but I normally don't set height on the tr tags anyway. I prefer to keep height and width together so I normally set the height on the first cell in a table.

Glad I could help. Thanks for the A. :^)

Cd&

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Beginner's Guide to HTML and CSS

Article by: Experts Exchange

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.

How to set up an email signature rule in Office 365 based on existing HTML file using PowerShell

Article by: CodeTwo

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …

Calling and Texting Links for Mobile Sites in HTML

Video by: Sarah

In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…