Accessing row heights with the DOM.

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
LVL 31
seanpowellAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
COBOLdinosaurConnect With a Mentor Commented:
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
 
COBOLdinosaurCommented:
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
 
COBOLdinosaurCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
seanpowellAuthor Commented:
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
 
seanpowellAuthor Commented:
Hold on - didn't see your last comment...
0
 
seanpowellAuthor Commented:
0
 
seanpowellAuthor Commented:
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
 
COBOLdinosaurCommented:
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
All Courses

From novice to tech pro — start learning today.