Question

I have an area on a white html page that I would like to divide into smaller rectangular units each with a black background and render one black unit at a time on page load, horizontally in rows, until the area is completely black. This is aesthetic only, there is no functionality or other content within the units.

It can use Javascript, JQuery, CSS and or PHP if necessary. The simplest idea I could think of was a CSS table in which all cells have a black background and a CSS attribute visibility: hidden then changing each cell one at a time to visibility: visible with a setTimeOut?

The other approach I could think of is nesting a black background CSS div, my black unit, within another div set to the final area size and cloning the nested div with setTimeOut until the parent div is completely full. I’m not sure which solution is lighter if either.

Where I’m particularly stuck is how to reference each cell (or div) one at a time, and whether I have to give each black table cell or div unit a manual id reference, which is less flexible, or whether it can be done dynamically.

Answer 1

You could make <table> (I made a grid, but single-row grids look nice too):

<table>
    <tr><td>The</td></tr>
    <tr><td>Monkeys</td></tr>
    <tr><td>Are</td></tr>
    <tr><td>Loading</td></tr>
    <tr><td>The</td></tr>
    <tr><td>HTML</td></tr>
</table>

And iterate via JS:

animateNext($('table tr td'));

function animateNext(items) {
    items.eq(0).animate({opacity: 1}, 300, function() {
        animateNext(items.slice(1));
    });
}

It supports an arbitrary number of cells. Here’s a demo: http://jsfiddle.net/vmSNs/49/

I added some CSS styles to make it overlay, and make the items take up identical heights to fill up the screen. The demo shows it all.