Solved

data table layout with window split - frames/css ??

Posted on 2006-11-23
12
330 Views
Last Modified: 2008-01-16
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
Comment
Question by:hc0904pcd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 4
12 Comments
 
LVL 16

Expert Comment

by:Brian Pringle
ID: 18005970
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
 
LVL 6

Author Comment

by:hc0904pcd
ID: 18010200
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
 
LVL 16

Expert Comment

by:Brian Pringle
ID: 18010218
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Author Comment

by:hc0904pcd
ID: 18012892
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
 
LVL 16

Expert Comment

by:Brian Pringle
ID: 18013261
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
 
LVL 6

Author Comment

by:hc0904pcd
ID: 18013303
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
 
LVL 6

Author Comment

by:hc0904pcd
ID: 18013333
0
 
LVL 16

Accepted Solution

by:
Brian Pringle earned 500 total points
ID: 18016321
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
 
LVL 6

Author Comment

by:hc0904pcd
ID: 18016424
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
 
LVL 6

Author Comment

by:hc0904pcd
ID: 18018802
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
 
LVL 6

Author Comment

by:hc0904pcd
ID: 18112014
thanks for your help btpringle
0
 
LVL 6

Author Comment

by:hc0904pcd
ID: 18112058
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question