difficult HTML, JavaScript, CSS grid page

Question

FYI, This is a simplified/generic example of what I'm working on. I'm just looking for the HTML, JavaScript, and/or CSS that can make this work. I'd prefer that this can be done without any javascript library. Also, the page will be built based on data loaded from a database. This only needs to work in newer IE/Firefox browsers.

I need to create a web page that has a grid of fixed size "cells" on it, each cell will be 150 pixels by 150 pixels. Here is sample 6x3 grid, but my grids will vary in size (4x10 or 3x5, etc. as per the database data):

-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |       6x3 grid of "cells"
|     |     |     |     |     |     |
-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------

each of these cells will need the following:

1) contain a "main" image that is 150 pixels by 150 pixels. This image will need to be changed in the browser, hopefully using CSS sprites if possible. I'd like to stick all of these images into a single file and crop down to what is needed in each cell.

2) When the mouse is over a "Cell", an overlay of click-able images will display. In the sample below I use letters, but the images will not be letters, more like icons. These clicks need to be able to run a different per image javascript function (so a click on the "A" image will run function A, while a click on "F" will run function F, etc). Images will be dependent on database info, so for different cells, some will be included and other not. Their position within the cell will always be fixed and controlled. Here is what a single cell might look with the images (letters) over top:

---------
|A  B  C|
|D  E  F|     a single cell where all overlay images appear
|G  H  I|
---------

---------
|A     C|
|   E   |     a single cell where only some overlay images appear
|G      |
---------

3) free text wrapping and centered within the cell. It would be best if this free text was above the main image #1 and below the click-able images #2, but if it was on top of everything than that would be OK too. There will be a reasonable length limit on this text, so scrolling beyond the 150px x 150px should not be an issue, but it will need to wrap.

For the record, this is not homework! and HTML/javascript/CSS is certainly not my strength. I have been working at this for a while and have seen/worked with many examples of how to do various components of this. I've yet to find anything that can work when everything id put together.

Answer 1

Personally I think tables are the devil, so here is something more like what I would do that uses floated divs:

http://jsfiddle.net/gbcd6/11/

You could easily swap out the text content for images, or add background images through CSS, as well as call separate JS functions based on the one-nine class each "control" div has.

EDIT:

Here is the most current version of the solution , which does include an actual table rather than using display: table-cell , as well as additional example markup for images and wrapping, and a basic Javascript example. This was done to fix an issue with older browser support, and to meet KM's requirements. Though the overall structure is still pretty much the same as the original fiddle.

Answer 2

I'd go for a large table, indeed.

And it's not so very hard to accomplish, at least if this is more or less what you need:

http://jsfiddle.net/gNBSc/4/

(i'm a bit bored, today :-)

Answer 3

I just came up with this solution http://jsfiddle.net/LNw3G . It's a mix between the use of table and div elements.

I also added an image sprite , positioning through class names left , center , right , top and bottom (so you don't have to edit all the image positions in your css), and javascript for parsing specific calls depending on the anchor class .

This is an example of the HTML for a single cell. cell-wrap cell1 contains the elements and positions the background image sprite, the table vertically aligns the text, and cell contains the controlled positioned images wrapped into image divs.

<div class="cell-wrap cell1">
    <table class="content">
        <tr>
            <td>Connection is not correct</td>
        </tr>
    </table>
    <div class="cell hidden">
        <div class="image left top">
            <a href="#linkA" class="linkA"><img src="http://goo.gl/wNDMe"></a>
        </div>
        <div class="image right top">
            <a href="#linkB" class="linkB"><img src="http://goo.gl/wNDMe"></a>
        </div>
        <div class="image left bottom">
            <a href="#linkC" class="linkC"><img src="http://goo.gl/wNDMe"></a>
        </div>
    </div>
</div>

This is the significant javascript code, which filters anchors containing class names with link to the desired specific functions:

$(function() {
    $(".cell a").click(function(e) {
        if ($(this).attr("class").match(/link(.)(\\s[\\b]*)?/)) {
            var param = $(this).attr("class").replace(/(.*\s)*link(.).*$/, "$2");
            doThings(param);
        }
    });
});

function doThings(param) {
    switch (param) {
    case 'A':
        //specific 'A' functions
        break;
    case 'B':
        //specific 'B' functions
        break;
    default:
        //default functions
        break;
}

It has been tested IE7+, FF, Chrome, Safari and Opera.

Ps: There is a workaround for IE6 you can use for this example, consisting in adding an specific hover.htc file and the css line body { behavior: url(hover.htc); } body { behavior: url(hover.htc); } ( more detailed here ) to simulate hover effect on non-anchor elements.

Ps: Be careful with the <!DOCTYPE declaration. If you leave empty spaces, maybe something like this <! DOCTYPE <! DOCTYPE , IE7 may treat it as non valid jumping into quirks mode (while testing, it drove me nuts!).

Answer 4

Gave it a try, you can find the attempt here . Let me know if misunderstood something. Tested in FF5, newest Chrome, IE8 (and in IE7 compatibility mode). Uses no libraries, doesn't need to actually be a grid (depends on the width that you can set in CSS) and gives you the index of the image and the button that was clicked. Oh, and the grid should be easily generatable (based on your DB) in PHP etc.

EDIT : The text is now vertically-aligned also.

Answer 5

http://jsfiddle.net/F37qs/1/

Pretty much an example of what you would want with

1. floating div's... Allowing custom "table sizes";
2. Reactive rollover "abit randomized"; and lastly,
3. Centralized content (see the centralized text in each grid);

Note : You can adjust the various number of rows / cols you want. =)