[RESOLVED] Get table height | Apply that height (- 20px) elwsewhere

@IvomanJan 25.2007

As the title states, can someone help to achieve it?

The problem is the following. Check out the example in FF and IE.

– ~~[URL=”http://two.xthost.info/ivoman/tests/cellheight/table-cell-heigh-with-rowspan.html”]~~example[/URL]

– ~~[URL=”http://two.xthost.info/ivoman/tests/cellheight/table-cell-heigh-with-rowspan.txt”]~~sourcecode of the example[/URL]

As you can see in FF, the Left Cell keeps its height when content gets added on the right.
As you can see in IE, the Left Cell doesn’t keep its height when content gets added on the right.

I’ve searched and tried alot to prevent the cell from stretching, but came to the conclusion it cannot be done. (only with nestled tables, wich is not what I want)

————–

So, I did some searches and found it could be done using Javascript. But becasue I’m not that good at it, I need someone’s help.

Check out what I’ve put together so far.

– ~~[URL=”http://two.xthost.info/ivoman/tests/cellheight/javascript-apply-height.html”]~~example[/URL]

– ~~[URL=”http://two.xthost.info/ivoman/tests/cellheight/table-cell-heigh-with-rowspan.txt”]~~sourcecode of the example[/URL]

As you can see it works in FF. But in IE the page won’t even load.
There must be something corrupt. But I don’t know where because I don’t know anyhing about Javascript. Can somone help me with it? Thanks.

to post a comment

JavaScript

14 Comments(s) _↴

@IvomanauthorJan 25.2007 — #Let me try to explain what I want with a simple picture.

The script should:

- get the height of a certain table (in example the table with id="table")

- apply that height - 20px to another id (in example the id="cell2")

[upl-file uuid=ffe60f54-f49f-481c-ac21-ce53b8b3db77 size=88kB]example-explanation.JPG[/upl-file]

@duke_okcJan 25.2007 — #Let me try to explain what I want with a simple picture.

The script should:

- get the height of a certain table (in example the table with id="table")

- apply that height - 20px to another id (in example the id="cell2")

[/QUOTE]
what would be the height of cell1 if you apply the height (20 px) of table to cell2?

@IvomanauthorJan 25.2007 — #height cell1 = 20px

height cell2 = height table - 20px

(height cell2 = height table [I]minus[/I] 20px)

Whenever cell2 receives a height 20px smaller then the table it pushed the height of cell1 to be 20px always! It prevents the cell1 for ever stretching.

@IvomanauthorJan 26.2007 — #My site is made with tables. The height of the table with written content in is always different on every page on the site. So with javascript I could [I]get[/I] the current height of a table. And apply that height ([I]minus[/I] 20px) to the cell2.

@duke_okcJan 26.2007 — #Okay..based on some research I was able to find two different ways of getting this done.

Try either
[CODE]document.getElementById('tableID').clientHeight [/CODE]
OR
[CODE]document.getElementById('tableID').offsetHeight [/CODE]

Also, go over this article and it would help you understand the concept little better.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp

@IvomanauthorJan 26.2007 — #Do these function only work with DIV ID's? OR also with TABLE ID's? Because it isn't [I]getting[/I] the height OR it is'nt [I]applying[/I] the height.

See this example. In both IE and FF, it doesn't do [I]get[/I] or [I]apply[/I].

Can you have a look at the code?

@IvomanauthorJan 27.2007 — #As I don't know enough about javascript, can someone help out? It seems I can't manage it on ly own and I really want this script to work.

I need a javascript to

- get the height of a table [COLOR="Silver"]<table id="table"></table>[/COLOR]

- and aply that retrieved height (- 20px) to another id [COLOR="Silver"]<td id="bottom"></td>[/COLOR]

I don't know if the id's are important, but I thought I makes it easier?

Get the height of ID [COLOR="Silver"]table[/COLOR] and aply that height (- 20px) to ID [COLOR="Silver"]bottom[/COLOR].

@IvomanauthorJan 30.2007 — #Is there really nobody willing to help?

@duke_okcJan 30.2007 — #Do these function only work with DIV ID's? OR also with TABLE ID's? Because it isn't [I]getting[/I] the height OR it is'nt [I]applying[/I] the height.[/QUOTE]
What is the height of the table set to initially?

@IvomanauthorJan 30.2007 — #There is no height set. On each and every page of the site, the table has a different height. Because... The table expands as content/text gets added in id=cell3.

@duke_okcJan 31.2007 — #The sourcecode link does not work. Can you post your code here please?

@IvomanauthorJan 31.2007 — #I sure can. ?

Thank you for your willingness to help me out on this, duke_okc. I really appreciate you doing so. Really!

Here's the code:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
 <html xmlns="http://www.w3.org/TR/xhtml1">
 <head>
 <style>
 
  HTML      {height:100%} 
  BODY      {height:100%; margin:5px;}
  TABLE     {width:100%;}
  #blankcell    {background-color:#00ff00;}
  #bottom {height:expression(document.getElementById('table').offsetHeight - 5 + 'px')}
 
 </style>
 <script language="JavaScript">
 function SetExpression() 
 {
 
  if (document.all) document.getElementById('bottom').setExpression('height', 'document.getElementById('table').offsetHeight-5');
 
  }
 </script>
 </head>
 <body onload="SetExpression()">
 <table border="0" align="center" cellpadding="0" cellspacing="0" id="tab1e">
 <tr id="blankcell">
 <td width="150"><p>&nbsp;</p></td>
 <td rowspan="2" align="left" valign="top"><p>Some<br />
 
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
 
   tall<br />
   content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
 
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some<br />
 
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
 
   tall<br />
   content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
 
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some<br />
 
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
 
   tall<br />
   content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
 
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p></td>
  <td width="150" rowspan="2" align="left" valign="top"><p>TEST</p>
 
   <p>TEKST</p>
   <p>TEST</p>
   <p>TEKST</p>
   <p>TEST</p>
   <p>TEKST</p>
   <p>TEST</p>
 
   <p>TEKST</p>
   <p>TEST</p>
   <p>TEKST</p>
   <p>TEST</p>
   <p>TEKST</p></td>
 </tr>
 
 <tr>
 <td width="150" align="left" valign="top" id="bottom"><p>Navigation</p>
 <p>Navigation</p></td>
 </tr>
 </table>
 </body>
 </html>[/CODE]

@duke_okcJan 31.2007 — #Okay, your syntax is somewhat like this:

object.setExpression(sPropertyName, [B]sExpression[/B] [, sLanguage])

The provided [B]sExpression[/B] is invalid when ‘document.getElementById('table').offsetHeight' is previously unspecified

You may want to try this if your table occupies the entire page:

function SetExpression()

{

if (document.all) document.getElementById('bottom').setExpression('height', ‘document.body.clientHeight-20');

}
This would use the height of the body instead of the height of table. I hope this helps.

@IvomanauthorJan 31.2007 — #Succes!!! ?

You've helped me towards the correct solution!

Here it is:

Green Cell Don't Stretch (basic solution)

Here it is again:

Green Cell Don't Stretch (WITH header & footer)

Thank you very much, duke_okc!

Ivoman

--------------------------------

Here's the source code of the basic solution in case the html aren't hosted anymore and someone needs this stuff:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html xmlns="http://www.w3.org/TR/xhtml1">
 <head>
 <title>Green Cell Don't Stretch!</title>
 <style type="text/css">
 html {height:100%; padding:0px; margin:0px;} 

 body {height:100%; padding:0px; margin:0px;}
 #cell02 {
 background-color:#CCC;
 vertical-align:top;
 text-align:left;
 }
 #cell01 {
 background-color:#0F0; 
 padding:0px; 
 margin:0px; 
 height:1;
 }
 #cell03 {
 background-color:#EEE;
 vertical-align:top;
 text-align:left;
 }
 </style>
 <script language="JavaScript">
 function SetExpression() {
 if (document.all) document.getElementById('cell03').setExpression('height', 'document.body.offsetHeight-1');
 }
 </script>
 </head>
 
 <body onload="SetExpression()">
 <table width="100%"  border="0" cellspacing="0" cellpadding="0" id="table">
 <tr>
 <td width="200" id="cell01"></td>
 
  <td rowspan="2" id="cell02">
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some arbitrarily tall content.</p>
 
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some<br />
   arbitrarily<br />
 
   tall<br />
   content.</p>
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
 
   content.</p>
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
 
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
 
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
 
   tall<br />
   content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
 
   <p>Some arbitrarily tall content.</p>
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some arbitrarily tall content.</p>
 
   <p>Some<br />
   arbitrarily<br />
   tall<br />
   content.</p>
   <p>Some<br />
   arbitrarily<br />
 
   tall<br />
   content.</p>
   <p>Some arbitrarily tall content.</p>
  </td>
 </tr>
 <tr>
 <td width="200" id="cell03">
 
   <p>NAVIGATIONLINK</p>
   <p>NAVIGATIONLINK</p>
   <p>NAVIGATIONLINK</p>
   <p>NAVIGATIONLINK</p>
  </td>
 </tr>
 </table>
 
 </body>
 </html>
 [/CODE]

Also in #JavaScript _↴

Some newb problems dynamically resizing textArea Hyperlink that opens a specific browser?

Success!

Help @Ivoman spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Get table height | Apply that height (- 20px) elwsewhere

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Get table height | Apply that height (- 20px) elwsewhere

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴