It's 2AM and I'm leaving the scrollbar...
February 21, 2011 9:52 AM Subscribe
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.
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.
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
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
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
posted by Artw at 10:18 AM on February 21, 2011
Response by poster: 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
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
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
posted by derbs at 10:23 AM on February 21, 2011
Response by poster: 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
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
Response by poster: WHOA!
That jquery grid is $400
posted by Drasher at 10:27 AM on February 21, 2011
That jquery grid is $400
posted by Drasher at 10:27 AM on February 21, 2011
Best answer: 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
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
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
Best answer: 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
It is simple, not sure if it will suit your purpose.
posted by czytm at 11:15 AM on February 21, 2011
Response by poster: 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
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
« Older Mobile phone options for Africa to US calling? | iTunes Song Options Without Opening iTunes Newer »
This thread is closed to new comments.
posted by Artw at 10:00 AM on February 21, 2011