Improve company productivity with a Business Account.Sign Up

Solved

Accessing row heights with the DOM.

Posted on 2004-03-27

1 solution

Medium Priority

519 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

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 2000 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.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment Already a member? Login.

Email Signature Size - Best Practice

Article by: Exclaimer

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.

Easy Methods to Remove Duplicate Emails in Outlook!

Article by: Jane

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…

Embedded Flash in HTML5

Video by: Sarah

In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

HTML

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…