getting height of current table cell

[dtest]

is it possible to read the current height of a table cell?

I have 3 tables next to each other and would like to dynamically alter the height of a cell in the last 2 tables according to the height of a cell in the first table (the cell in the first table does not have a static height, but can change in height depending on what text is placed in it)

[Trace]

Here's a quick and dirty way. Hopefully you'll be able to suite if for your needs.

Css

<style type="text/css">
#table1{
background-color:red;
display:inline;
}
#table2{
background-color:blue;
display:inline;
}
#table3{
background-color:green;
display:inline;
}
</style>

html

<table id="table1">
<tr>
<td id="cell1">&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br></td>
</tr>
</table>

<table id="table2">
<tr>
<td id="cell2">&nbsp;</td>
</tr>
</table>

<table id="table3">
<tr>
<td id="cell3">&nbsp;</td>
</tr>
</table>

Javascript (must be placed after the tables have loaded)

<script type="text/javascript">
cellOne = (document.getElementById('cell1').offsetHeight);
cellTwo = (document.getElementById('cell2').offsetHeight);
cellThr = (document.getElementById('cell3').offsetHeight);

if(cellOne > cellTwo && cellOne > cellThr){ newHeight = cellOne; }
if(cellTwo > cellOne && cellTwo > cellThr){ newHeight = cellTwo; }
if(cellThr > cellOne && cellThr > cellTwo){ newHeight = cellThr; }

document.getElementById('cell1').style.height = newHeight + 'px';
document.getElementById('cell2').style.height = newHeight + 'px';
document.getElementById('cell3').style.height = newHeight + 'px';
</script>

[dtest]

wow that works really good!

unfortunately I won't be able to use it on my site though, because this script triggers the IE information pop-up bar

is there any way around this?

[Trace]

That probably only happens when you try running it locally. Shouldn't be a problem once uploaded to your server.

[birdbrain]

Hi there dtest,

As Trace has pointed out this only happens locally.
To effect a cure for the page add this snippet of code directly after the DOCTYPE...

[color=navy]
[blue][2]<!-- saved from url=(0014)about:internet --> [/2][/blue]
[/color]

To permantly disable this information do this...

1. open IE.
   
2. click 'Tools'.
   
3. click 'Internet Options'.
   
4. click 'Advanced' tab.
   
5. scroll down to 'Security'.
   
6. check 'Allow active content to run on My Computer'.
   
7. click 'Apply'.
   
8. click 'OK'
   
9. have a beer. ;)
   

Further reading:-

[msdn.microsoft.com ]

birdbrain

[edited by: birdbrain at 8:53 pm (utc) on Oct. 29, 2007]

[dtest]

you're absolutely right. on the server it's ok

thanks again!

and also thanks birdbrain for that tip!

[birdbrain]

No problem, you're welcome. ;)