• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 346
  • Last Modified:

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 :)
0
hc0904pcd
Asked:
hc0904pcd
  • 8
  • 4
1 Solution
 
Brian PringleSystems Analyst II, SCM, ERPCommented:
Don't use inline frames unless you have no other alternative.  They are not handled the same in different browsers.

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.
0
 
hc0904pcdAuthor Commented:
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?
0
 
Brian PringleSystems Analyst II, SCM, ERPCommented:
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.
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
hc0904pcdAuthor Commented:
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?
0
 
Brian PringleSystems Analyst II, SCM, ERPCommented:
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.
0
 
hc0904pcdAuthor Commented:
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?
0
 
hc0904pcdAuthor Commented:
0
 
Brian PringleSystems Analyst II, SCM, ERPCommented:
What browser are you using?  The reason that I am asking is that the first three in your list above use Internet Explorer-only extensions.  They will not work with other browsers, such as Firefox, Opera, Safari, and etc.  You are cutting out about half of the Internet users if you use those three methods.

The fourth one (www.imaputz.com), however, works just fine in Firefox because it is using CSS to format the table -- not a browser extension.  I would highly recommend that you look into using that one.
0
 
hc0904pcdAuthor Commented:
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.

0
 
hc0904pcdAuthor Commented:
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.



0
 
hc0904pcdAuthor Commented:
thanks for your help btpringle
0
 
hc0904pcdAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 8
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now