Solved

Accessing row heights with the DOM.

Posted on 2004-03-27
8
506 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
0
Comment
Question by:seanpowell
  • 4
  • 4
8 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10695467
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&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10695478
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&
0
 
LVL 31

Author Comment

by:seanpowell
ID: 10695500
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
0
 
LVL 31

Author Comment

by:seanpowell
ID: 10695503
Hold on - didn't see your last comment...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 31

Author Comment

by:seanpowell
ID: 10695514
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 10696149
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&

0
 
LVL 31

Author Comment

by:seanpowell
ID: 10696194
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10696233
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&
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now