data table layout with window split - frames/css ??
hi all,
I have a page of data.
There is a top header row of column names, along the top.
There is a column of row names, down the left.
And then I've got a grid table, and in each cell I show a tick if the value is 1, and show nothing for value of 0.
At the moment I've got 100 rows and 20 columns - both will scale upwards in the future.
The design requirement is that the table fits in a space which is 600px wide. Height is flexible.
My first thought was to use inline frames. Or a div with css applied to set the scrolling width & height.
Both seem to work okay (is one particularly better than the other?)
The problem is how to split the screen.
I need a sideways scrolling effect that includes the data and also the top row. That is the first requirement, so that users can go sideway until they see the column they are looking for, then they can read downwards to check the data.
But with 100 rows of data I need a vertical scroll as well, and one that keeps the top row in place and moves everything else down.
Can this be done?
What I need
- row 1 col 1 never moves.
- all rows starting from column 2 can scroll sideways, keeping col1 on the left unmoving
- all cols starting from row 2 can move up and down, keeping row1 at the top unmoving.
- table width 600px
- viewable height is flexible
I'm not sure whether this is impossible, or am I just missing something?
Would appreciate some creative inspiration :)
I have a page of data.
There is a top header row of column names, along the top.
There is a column of row names, down the left.
And then I've got a grid table, and in each cell I show a tick if the value is 1, and show nothing for value of 0.
At the moment I've got 100 rows and 20 columns - both will scale upwards in the future.
The design requirement is that the table fits in a space which is 600px wide. Height is flexible.
My first thought was to use inline frames. Or a div with css applied to set the scrolling width & height.
Both seem to work okay (is one particularly better than the other?)
The problem is how to split the screen.
I need a sideways scrolling effect that includes the data and also the top row. That is the first requirement, so that users can go sideway until they see the column they are looking for, then they can read downwards to check the data.
But with 100 rows of data I need a vertical scroll as well, and one that keeps the top row in place and moves everything else down.
Can this be done?
What I need
- row 1 col 1 never moves.
- all rows starting from column 2 can scroll sideways, keeping col1 on the left unmoving
- all cols starting from row 2 can move up and down, keeping row1 at the top unmoving.
- table width 600px
- viewable height is flexible
I'm not sure whether this is impossible, or am I just missing something?
Would appreciate some creative inspiration :)
ASKER
Hi NTP,
thanks for the suggestion
so when page 3 moves left, page 1 would scroll at the same time and the data rows would stay in sycn with the data row headers?
thanks for the suggestion
so when page 3 moves left, page 1 would scroll at the same time and the data rows would stay in sycn with the data row headers?
If that is what you need, then you could use a table in Page 3 that contains the data header row and the data rows. If you are running a script that generates the data, you could use the <TH> tag for the header row and the <TD> tag for the remaining data rows.
ASKER
hi btpringle,
I know how to use a td tag, thanks.
And I'm good with techiniques to use frames, iframes, or css to get a framed effect.
What I'm struggling with, is whether what I want to achieve is actually possible or not.
I don't think it can be done, but I'm hoping someone here will prove me wrong.
Here is a simpler summary of my question
- all data rows can scroll sideways (keeping their header row in sync)
- all data rows can scroll down, keeping their descriptor column (col1) in sync
To do that, it looks to me like I need an overlap in the scrolling area, and I don't see how that can be done.
hmm, unless I write my scrolling rules using css and javascript. Do you think that might work? Any other ideas?
I know how to use a td tag, thanks.
And I'm good with techiniques to use frames, iframes, or css to get a framed effect.
What I'm struggling with, is whether what I want to achieve is actually possible or not.
I don't think it can be done, but I'm hoping someone here will prove me wrong.
Here is a simpler summary of my question
- all data rows can scroll sideways (keeping their header row in sync)
- all data rows can scroll down, keeping their descriptor column (col1) in sync
To do that, it looks to me like I need an overlap in the scrolling area, and I don't see how that can be done.
hmm, unless I write my scrolling rules using css and javascript. Do you think that might work? Any other ideas?
I apologize, but I am not understanding the problem. If you want the header rows at the top to scroll with the data, why not just include them as part of the same table? You should be able to script it to generate the header row and the label row to the side right in with the data.
If that is not an option, then you would need to add some more coding to make it work. Look at how Google does it in their online spreadsheet at http://docs.google.com. Watch the header row as you scroll back and forth. The rows shift out of alignment just a little bit as you scroll, which means that they are moving the header row in relation to the location of the data rows by some means of scripting.
Unless you really need this functionality, you would probably save yourself a lot of work if you were to just include it all in the same table. If that is not an option, then you will need to look into scripting it.
If that is not an option, then you would need to add some more coding to make it work. Look at how Google does it in their online spreadsheet at http://docs.google.com. Watch the header row as you scroll back and forth. The rows shift out of alignment just a little bit as you scroll, which means that they are moving the header row in relation to the location of the data rows by some means of scripting.
Unless you really need this functionality, you would probably save yourself a lot of work if you were to just include it all in the same table. If that is not an option, then you will need to look into scripting it.
ASKER
re http://docs.google.com spreadsheets - thanks, that's a good example of what I'm trying to do.
Question is, how do they do that?
Question is, how do they do that?
ASKER
...update...
By searching on excel as a reference point I've found a new batch of sources.
Am now researching
http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html (looks promising)
http://blogs.msdn.com/mattdotson/archive/2006/03/02/542613.aspx
http://slingfive.com/pages/code/scrollTable/
http://www.imaputz.com/cssStuff/bigFourVersion.html
By searching on excel as a reference point I've found a new batch of sources.
Am now researching
http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html (looks promising)
http://blogs.msdn.com/mattdotson/archive/2006/03/02/542613.aspx
http://slingfive.com/pages/code/scrollTable/
http://www.imaputz.com/cssStuff/bigFourVersion.html
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I usually test in all browsers back to NN4 and Mac Ie5 but for this job job I only need 'modern browsers', IE6+, FF, Safari.
I'm working on the assumption that what I'm trying to do is not going to be easy and likely will not work in all browsers, in which case I'll serve up two or more versions of the page. The client themselves are only interested in seeing it work in IE6+ (and based on their webstats that's a reasonable call) so at the moment http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html is looking most promising. And if I have to use a IE only solution, then I'll serve up a simple version of the page (similar to imaputz) to non IE browsers.
I'm working on the assumption that what I'm trying to do is not going to be easy and likely will not work in all browsers, in which case I'll serve up two or more versions of the page. The client themselves are only interested in seeing it work in IE6+ (and based on their webstats that's a reasonable call) so at the moment http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html is looking most promising. And if I have to use a IE only solution, then I'll serve up a simple version of the page (similar to imaputz) to non IE browsers.
ASKER
I've got a solution to this.
Scrolls vertically & horizontally. The vertical scroll keeps the entire top row in place and scrolls up underneath it. The horizontal scroll moves the entire all columns except for the first. Result is an overlapping scroll, which I didn't think could be done.
So far it's working in IE7, FF1, NN7, OP7, and degrading well in NN4. I'll check it out next in Mac Safari & IE5.
Still got a lot of testing & tidying up to do, but when I'm finished I'll write it up & post it here.
Scrolls vertically & horizontally. The vertical scroll keeps the entire top row in place and scrolls up underneath it. The horizontal scroll moves the entire all columns except for the first. Result is an overlapping scroll, which I didn't think could be done.
So far it's working in IE7, FF1, NN7, OP7, and degrading well in NN4. I'll check it out next in Mac Safari & IE5.
Still got a lot of testing & tidying up to do, but when I'm finished I'll write it up & post it here.
ASKER
thanks for your help btpringle
ASKER
Solution
See http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html for an excellent, but unfortunately IE-only, solution.
And then see http://www.litotes.demon.co.uk/example_scripts/tableScroll.html for a really lovely cross-browser solution.
See http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html for an excellent, but unfortunately IE-only, solution.
And then see http://www.litotes.demon.co.uk/example_scripts/tableScroll.html for a really lovely cross-browser solution.
Instead, you might actually be better off using regular frames to create the page. You would have three different pages actually being displayed at the same time to make up the one frames page. It would look something like this.
--------------------------
| |
| Page 1 |
| |
--------------------------
| | |
| | |
| P | P |
| a | a |
| g | g |
| e | e |
| | |
| 2 | 3 |
| | |
| | |
--------------------------
Page 1 would contain the top header row of column names. Page 2 would contain the column of names. Page 3 would contain your grid data. You would disable the vertical and horizontal scrollbars for Page 1 and Page 2, but would enable them for Page 3. It is difficult to constrain a maximum table width. There is such an attribute in CSS, but once again, it is not supported the same by different browsers, which means that it does not always work.