Solved

Accessing row heights with the DOM.

Posted on 2004-03-27
8
509 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 31

Author Comment

by:seanpowell
ID: 10695503
Hold on - didn't see your last comment...
0
 
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 Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

856 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