Friday, July 6, 2007

Alternating Colors in a List

A bit of display code I came up with.

The problem: Your (database-driven) web page has a very long list of items and you want to make it easier to view.

The solution: Alternate background colors on each row, or preferably every third row, or fourth.

It's easy enough to alternate colors every other row, with code like this:

rowcount = 0

if (rowcount++ % 2) rowcolor = grey else rowcolor = white
...
next item

But I find that looks too busy. What if I want to have three lines of grey and then three lines of white? Given that I'm keeping the variable rowcount, I can simply modify the equation from:

if (rowcount % 2)

which, given the modulus of 2 will return a 0 if the rowcount is even, and 1 if the rowcount is odd; instead, try this:

if ((rowcount / 3) % 2)

What does this do? Well, first it divides the current row number by 3, no remainder. that means the first 3 rows (if you start with 0) divided by 3 will be 0, the next 3 will be 1, the next 3 will be 2, etc. The result of this divide will be alternating odd or even. That's where the modulus 2 comes in. Then you have a binary value alternating between 0 and 1 every 3 rows.

You can also divide by 4, 5, or any number to increase the number of rows in each color block.

I'll be looking for an example of a site that does this. The one I did is internal only, so no link here.

No comments: