table resizing dependant upon window size

Forum Moderators: open

Message Too Old, No Replies

table resizing dependant upon window size

McIntyre

6:16 pm on Feb 8, 2004 (gmt 0)

Hi.

I've got two tables, one as a heading, with a title, etc., and a second with the content of the page in it. The top table must be 128 pixels in height. I want the bottom table to resize, so that its height is equal to 100%, (in the way that you might put "document.all.table1.style.height=100%"), minus 128 pixels. This will ensure that the bottom of the second table is always aligned with the bottom of the window.

I've attempted to make this happen using the following:

document.all.table1.style.height=parseFloat(100%)-128;

This has failed. What's wrong with that piece of code, and how can I get it to work?

Thanks in advance.

isitreal

2:42 am on Feb 9, 2004 (gmt 0)

You don't need to use javascript at all to achieve this affect. It's built into tables and css, put your whole page into one table, make your header be row one of the table, make the content be row two, using colspan on the head <td> cell if needed if you have more than one table cell in the content area. If you cut and paste this code you'll see that the table fills the entire browser window perfectly, this works on Mozilla, Opera, and of course IE.

<html>
<head>
<title></title>
<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
table {width:100%;height:100%;background-color:green;}
</style>
</head>
<body>
<table><tr><td>words</td></tr></table>
</body>
</html>

I've done javascript height sizing for another site, and it doesn't work reliably at all cross browser, especially on mac safari, this will always work, and will always display correctly whether or not the user has javascript enabled. That's because different browsers consider window height differently, opera for example sets it at I believe the entire height of the browser, not the display window part, which means you have to do browser sniffing to get the result you want, and it still won't work reliably.

Purple Martin

3:53 am on Feb 9, 2004 (gmt 0)

Yes that will work on those browsers. isitreal sure knows how to get the best from layout tables.

But if you're a purist, you may be interested in this: you're not supposed to specify height for tables or table rows or table cells. Height is not a valid attribute for tables. Yes I know that isitreal didn't use an attribute, and used a CSS style for height instead (so the page will validate), but I think that this should be avoided in the same way that using an attribute should be avoided. This is because (for purists) tables are supposed to be for displaying tabular data, and they will automatically "grow" height to fit the data.

I'm being very pedantic, so feel free to ignore me and use the table. It's simple and it works! :-)

isitreal

5:38 am on Feb 9, 2004 (gmt 0)

Purplemartin: nice tidbit, I didn't know that. I think I'm giving up on my purist phase though, all I'm finding it gets me is headaches, coupled with failure to do what I wanted anyway, lots of time spent learning lots of strange little behaviors of different browsers, when really the whole point is just to get something up on the web so people can see it.

The real problem here is that browser coders have done such an amazingly good job with the table tag that it's really a waste not to use it in its full potential, who cares what the W3C says, their vision of the web is pretty drab as far as I'm concerned, it's not my vision, although CSS 1 and 2 are totally great, no doubt about that.

Not to say my code won't validate zero error and all that, but I'm going to go for functionality from now on I think, this discussion really cemented it for me, I wasn't sure before, although I was getting to that point. Why not just treat tags as what they are, ways to make the browser do something? Then follow the rules as closely as possible as long as it doesn't waste too much time in the process, and as long as it doesn't negatively impact your intention on page look and feel?

In other words, forget that a table is 'supposed' to be for x or y purpose. That definition is completely random, it's just something somebody said sometime, then they wrote a rule, that everybody ignored. A table is supposed to hold data, and a webpage is data, so what's the problem?

Purple Martin

6:11 am on Feb 9, 2004 (gmt 0)

really the whole point is just to get something up on the web so people can see it

Absolutelty. Let's also remember that there are many kinds of user agent that interpret HTML, not just the common browsers. We want to just get something up on the web so all people/programs can see/read/hear/braille-thing/spider/etc it. That's why it's a good idea to use HTML in the right way.

Not to say my code won't validate zero error and all that

Your code as posted above validates great with a doctype and a charset :-)

Why not just treat tags as what they are, ways to make the browser do something?

I totally agree. Browsers, and all the other sorts of user agent as well. To make them all do the right something, I want to use the right tags for the job.

A table is supposed to hold data, and a webpage is data, so what's the problem?

Actually, a table is supposed to hold tabular data, not just any information ;-)

isitreal

5:52 pm on Feb 9, 2004 (gmt 0)

Purplemartin: thanks a lot for your thoughtful response, I've been trying to find a balance between purity of code and functionality this last year, this discussion has really helped clarify some issues for me.

I think one thing that is missed on some of these discussions is the importance of the page layout look and feel to the end user. I'm a bad designer, so when I get a page design from a designer, I try to duplicate it as exactly as possible, using clean HTML and CSS.

Usually the results the designer was looking for are almost impossible to reach using things like divs, or if I were to try to do it, the page template development and debugging time would be up to 20-50 times longer. I have a friend who is a designer and every time I show him a full div css site, he thinks it's very interesting and cool but sort of bland, missing something, which is what I see too in most cases.

Search engines don't care if stuff is in tables, obviously, or there wouldn't be very many results on them, they also don't care if stuff is in correctly coded frames or iframes, despite rumours to the contrary (I test this now and then with a new iframe content page and soon see my new section up on google in the top 10).

Using Opera's built in small handheld device emulator, you can see that all that happens with a table is that handheld screen just ignores the table tags and treats the data in the order it appears on the page, just like it would with divs.

So if the end user doesn't care, if the client doesn't care, and search engines don't care, and if the page loads in seconds, why should I spend that much time to satisfy a completely arbitrary definition of what a tag is 'supposed to be' for? I say this having tried this very thing many times over the last year.

isitreal

9:46 pm on Feb 9, 2004 (gmt 0)

Mcintyre: Sorry, I tested that some more and setting the table height at 100% makes Opera fix the table height at the window height, cutting off content that extends below that, I couldn't find a solution to that, hope you can find something that works.

Ramzay

5:27 am on Feb 18, 2004 (gmt 0)

Gentlemen,
I have enjoyed your exchange, and had learned some helpful information. However, my problem is similar to one described by McIntyre, albeit with little caveat: I too use table to position banner on top, navigation on the left, content on the right, and the footer on the bottom. Problem with sizing of content and navigation cells (although they obviously serve as containers to other tables).
Navigation cell/pane has variable (over time) number of navigational links (read menu options). Yet it should be stretched to the entire height of the window with menu options aligned to the top, and some image to the button. This is challenge in itself, because for some weird reason image refuses to go peacefully to its place. But this is another story. If I let the height to be determined by the browser, the image would be right bellow the menu with the empty space on the button. So, I need to use the size of the window to define the minimum size of the navigation cell/pane.
Now, in the content cell/pane I may have a lot of information. Yet, I want the content cell be the same height as the navigation cell, and I would make the actual content to scroll inside the cell with the help of IFRAME.

Therefore, let me repeat the original question: is there a way in Javascript to set table heights dependent upon window height?

I tried to use window.innerHeight or window.dialogHeight, but for some reason IE6 does not return any of them.

Thanks for your help.

McIntyre

9:21 pm on Feb 19, 2004 (gmt 0)

I understand what Isitreal is saying about just "getting it on the internet", but in this case, my goal isn't actually to make as many people read the information as possible, but instead to satisfy to the nearest pixel the fleeting dreams of my difficult clients.

Thanks for all the input.