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('r
}
This does work:
http://www.pdgmedia.com/ee/dom_check2.html
function sizeRows() {
var height;
document.getElementById('r
height = document.getElementById('r
document.getElementById('r
document.getElementById('r
}
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
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('r
}
This does work:
http://www.pdgmedia.com/ee/dom_check2.html
function sizeRows() {
var height;
document.getElementById('r
height = document.getElementById('r
document.getElementById('r
document.getElementById('r
}
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
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.getEleme
document.getElementById('r
document.getElementById('r
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&
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.getEleme
document.getElementById('r
document.getElementById('r
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&
If that does not take, you might have to force it in the td with:
H = Math.max(document.getEleme
document.getElementById('r
document.getElementById('r
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&
H = Math.max(document.getEleme
document.getElementById('r
document.getElementById('r
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&
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
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
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.getEleme
document.getElementById('r
document.getElementById('r
}
</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.
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.getEleme
document.getElementById('r
document.getElementById('r
}
</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.
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&
Glad I could help. Thanks for the A. :^)
Cd&
Thanks for using Experts Exchange.
Please provide your email to receive a sample view!
*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.