Solved

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

Posted on 2006-11-23
12
326 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
  • 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
 
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

707 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now