Solved

Accessing row heights with the DOM.

Posted on 2004-03-27
8
505 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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

747 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

12 Experts available now in Live!

Get 1:1 Help Now