It's 2AM and I'm leaving the scrollbar...

February 21, 2011 9:52 AM

I am stuck again and need help. I am tasked with creating a web page that displays information in a grid format. The data is static in that the user cannot change the values, but they can reorder the column and/or row order.

There may be at times more columns or rows than will fit on the screen. I would like the display to look like a spreadsheet that has frozen panes (i.e. the row header titles do not disappear when scrolling to the right, the cells 'disappear' under the headers).

The cells of the grid will display small images that denote a ranking from 1 to 5, each with a different background color.
The data is always the same, but each user viewing the page will have a different display because the users can reorder the columns and rows.

My first attempt was to use the PHP GD functions and draw a grid and data into a JPG or PNG image. Now, it seems that the number of rows and columns may have grown to be too large to display as a single graphic.

One difficulty point is that the column headings are bigger than I would like. In my first attempt, I had used the drawtext functions to print the text for the headers on a 45 degree angle.

Now, I am failing at being able to find a quick and dirty solution. I have searched for javascript and CSS scrollbars and scrolling regions but all I get are answers for scrolling a number of images and tips on changing the color of the scrollbars. I want to scroll a single image. If I am going to scroll the image that I draw, I need to be able to scroll the column and row header graphic areas along with the cell areas.

I am not adverse to using a prepackaged solution, but I cannot spend much and most packages that I have seen have a bunch of overkill for what I am trying to do.

If there is a better and/or easier way, I would really like to hear about it.

posted by Drasher to computers & internet (14 answers total)

Any particular reason you are not just using a HTML for your grid?
posted by Artw at 10:00 AM on February 21, 2011

For tabular data, use an HTML table. It's quite easy to add something like a jQuery table sorter for sorting the rows. I don't know how easy it is to sort columns.
posted by expialidocious at 10:16 AM on February 21, 2011

You must use HTML tables for this, as Artw queried. Put the table in a div that has the css property OVERFLOW set to "auto".

See here for a quick example (scroll down a bit)

Basically, you can have anything you want in this 'viewport', and can scroll horizontally as well as vertically. Put your row/column headers in there as well, and set their css POSITION property to "fixed", perhaps set a high Z-INDEX, and the headers will stay fixed as everything else scrolls underneath it.
posted by derbs at 10:17 AM on February 21, 2011

Yeah, if you manage to get away from tables jQuery and a grid plugin are going to be your most obvious choice.
posted by Artw at 10:18 AM on February 21, 2011

Artw & expialidocious:I just figured it would be too cumbersome. About 100 rows and 20(?) columns.
The mental image I formed immediately went to the graphic, I will try some experiments with the HTML.
posted by Drasher at 10:21 AM on February 21, 2011

And for sorting the table, have a look at how Wikipedia does it. It's a relatively trivial task in Javascript

For example (scroll down a bit)
http://en.wikipedia.org/wiki/International_ranking_of_household_income
posted by derbs at 10:21 AM on February 21, 2011

On preview: Artw's jquery grid plugin suggestion looks useful
posted by derbs at 10:23 AM on February 21, 2011

derbs: Your answer merits looking into.
I am no CSS guru, I would not know how to "have anything you want in this 'viewport', and can scroll horizontally as well as vertically. Put your row/column headers in there as well, and set their css POSITION property to "fixed", perhaps set a high Z-INDEX, and the headers will stay fixed as everything else scrolls underneath it." without some coaching.
posted by Drasher at 10:24 AM on February 21, 2011

Ok Drasher - let me knock you up a quick demo
posted by derbs at 10:25 AM on February 21, 2011

WHOA!
That jquery grid is $400
posted by Drasher at 10:27 AM on February 21, 2011

Very rough demo here.

Do you see when you scroll around, the headers stay fixed. However - do you want the column header to scroll left/right but not up/down?
posted by derbs at 10:49 AM on February 21, 2011

$400 Jquery plugin sounds a bit much for what you are trying to do, You should certainly be able to find yourself a solution that doesn't cost that much (or anything) and isn't over featured.

12 Useful jQuery Plugins for Working with Tables

Or you might be better off using a little bit of CSS (maybe with some homebrew JS) as derbs suggests.
posted by Artw at 10:54 AM on February 21, 2011

I've used this in the past: http://tablesorter.com/docs/
It is simple, not sure if it will suit your purpose.
posted by czytm at 11:15 AM on February 21, 2011

derbs: WOW! That's the effect I need! But, yes, I need the column headers to scroll along with the cells.

Artw I looked at the 12 Useful jQuery Plugins, they just didn't seem to fit what I need.
posted by Drasher at 2:19 PM on February 21, 2011