Crispy Posted July 1, 2004 Share Posted July 1, 2004 Ok, Im trying to make a table adjust dynamicly to 100% height and 100% width of a window via a javascript. I've narrowed it down to the below function, which should be compatible with most browsers. However, I know that with IE the document.documentElement.clientWidth can only be called after the <Head> tag has been rendered, hense the below will not work... My question is; How do I calculate the height of the table row on page load and after that when the browser window is resized?<script language="javascript"> function TableHeight() { if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } hiY = document.write(myHeight - 140); } </script>It must be used in the following way:<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="90" bgcolor="#CCCCCC">1</td> </tr> <tr> <td height="25" bgcolor="#999999">2</td> </tr> <tr> <script language="javascript">document.write( "<td height=\"" + hiY + "\">" );</script>3</td> </tr> <tr> <td height="25" bgcolor="#333333">4</td> </tr> </table> Link to comment Share on other sites More sharing options...
gandalfgrey Posted July 1, 2004 Share Posted July 1, 2004 If i understand you correctly, you want a table with 4 rows and the 3rd one must automatically resize? If so, this can be easily done in CSS!<html><style>table {border:1px solid black;width:100%;height:100%;}thead td {height:90px;background:#CCCCCC}tfoot td {background:#333333;height:25px;}#2ndrow {height:25px;background:#999999;}</style><table cellspacing="0" cellpadding="0"> <thead><tr><td>SOME TEXT HERE(header) 1st row..</td></tr> <tr><td id="2ndrow">SOME TEXT HERE(header) 2nd row..</td></tr></thead> <tfoot><tr><td>SOME TEXT HERE(footer)</td></tr></thead> <tbody><tr><td>variable width cell</td></tr></tbody></table></html>I used border on table, to show that it resizes with the window, it can be removed of course. I tested it on ie6 and firefox, works nice. Link to comment Share on other sites More sharing options...
Crispy Posted July 1, 2004 Author Share Posted July 1, 2004 Ok, not exactly what I had in mind, but it will do the trick I suppose ... thx Link to comment Share on other sites More sharing options...
neosapience Posted July 2, 2004 Share Posted July 2, 2004 Tables! AHHHHHHHHHHHHHH, anything but tables. You can use <div> tags and CSS instead of tables, it's a lot nicer and easier. Link to comment Share on other sites More sharing options...
gandalfgrey Posted July 2, 2004 Share Posted July 2, 2004 so true, but he asked about the table :/btw, you'd prefer 4 frames? Link to comment Share on other sites More sharing options...
Kenny Pollock Posted July 6, 2004 Share Posted July 6, 2004 Tables are for tabular data, and CSS is for layouts.This is tabular data, which is why he is using tables. Link to comment Share on other sites More sharing options...
neosapience Posted July 7, 2004 Share Posted July 7, 2004 Tables are for tabular data, and CSS is for layouts.This is tabular data, which is why he is using tables. Link to comment Share on other sites More sharing options...
DarkPhoenix Posted July 7, 2004 Share Posted July 7, 2004 Tables are for tabular data, and CSS is for layouts.This is tabular data, which is why he is using tables. He's right, you know. Link to comment Share on other sites More sharing options...
neosapience Posted July 9, 2004 Share Posted July 9, 2004 Data can be catagorized quite easily using CSS sheets. It's also more flexible and uses far less code. I can't see any real reason to use tables except maybe to be backwards compatible with some obsolete browser. Link to comment Share on other sites More sharing options...
DarkPhoenix Posted July 12, 2004 Share Posted July 12, 2004 I'll let someone else say it for me.Here's why you should use tables and not CSS for tabular data. This is slide 43. For more reasons, read all slides until slide 51. (9 slides incl. the first one) Link to comment Share on other sites More sharing options...
newdles Posted July 13, 2004 Share Posted July 13, 2004 There is absolutely nothing "wrong" with tables. They function perfectly well and load perfectly fine. A moderately experienced coder in html alone could make a good design using tables. Yes, you have more power with using the <div> tags and css but it's not easier. I'll never understand where anyone gets the term "easier" to do than using tables.We had a thread about all this over at pps.net already discussing why one is better of the other and why tables aren't bad. http://www.purephotoshop.net/showthread.php?t=2337 Link to comment Share on other sites More sharing options...
DarkPhoenix Posted July 13, 2004 Share Posted July 13, 2004 As far as I can see, you were the only one who were pro-tables there. The only other hint of being pro-tables were the guy who were talking about the old 14.4 modem days, and that was basically cause there was no other way then.By all means, use tables if you want to, but you'll have a much larger user base if you follow the directions of the Web Accessibility Initiative. (or Section 508) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now