javascript

So I needed a method to take a long, nested list and turning it into a compact, multiple acolumn list, in order to display it as sort of a site map for the home page for a site I'm working on.

Being a huge fan of jQuery, it was naturally my go-to library of choice.

Scanning the plugins site, I found a possible solution from a feller called Ingo Schommer called columnizeList.

Score, right? Well... not exactly, at least for my case.

Ingo used some of the methodoligies outlined in this article on multi-column lists on A List Apart. One of the caveats of his methodology is that each list item has to be the same height. This works Ok for a lot of use cases, but since I'm using a Drupal menu as the source for the list, it could contain arbitrary text I don't control.

So, I started from scratch. Instead of relying on consistent line heights, and applying different margin settings to list elements, I instead decided to decompose the large source list into several smaller lists (one for each column) and then use a css float parameter to make them all appear side-by-side.

Here's a sample list for a demonstration, cribbed from Ingo's example:

1. harold (3550)
2. horatio (1320)
3. hitler (1120)
4. henry (784)
5. hector (358)
6. haploid (315)
7. hopping (50)
8. herbert mulroney (44)
9. hopscotching (29)
10. hominibus (19)
11. honkey (19)
12. hermoine (18)
13. hieronymus (13)
14. halliburton (12)
15. hummer (10)
16. harlod (10)
17. heironymious (9)
18. hemorrhoids (7)
19. hammersack (6)

(apparently a list of the most common fillers for the middle initial in Jesus H. Christ)

Anyway, here's what my script does to the above list:

1. harold (3550)
2. horatio (1320)
3. hitler (1120)
4. henry (784)
5. hector (358)
6. haploid (315)
7. hopping (50)
8. herbert mulroney (44)
9. hopscotching (29)
10. hominibus (19)
11. honkey (19)
12. hermoine (18)
13. hieronymus (13)
14. halliburton (12)
15. hummer (10)
16. harlod (10)
17. heironymious (9)
18. hemorrhoids (7)
19. hammersack (6)

And here's the code:

Download

There are only two parameters - cols, the number of columns to break the list into, and constrainWidth a boolean (defaulting to false) to specify whether you want all columns to be the same width.

I've tested with IE 6&7, FF3, Safari3 and Opera 9.something (for the three Opera users on the planet). The code could use a bit of refactoring perhaps for the purpose of beautification.

We spend lots of dough each year converting material from our dead-tree editions into web-friendlier versions for our web sites. We crank out a bunch of PDFs, and send them through the ether to somewhere where the labor is cheap and the workday long, like Vietnam, Indonesia or Canada or something. Then some poor soul slices 'n dices them into jpegs and links and such, and sends 'em on back, and posts them on our site.

So I thought to myself, "Self, you can do that without having to do something silly like use people and worse, pay for it.

It's a work in progress, but it goes something like...

• Export PDFs of ads from our DTI advertising system, and page PDFs from our Newsway prepress system.
• Multiplex the PDFs through xpdf, imagemagick and swftools to extract text, convert to bitmaps and convert to Flash files respectively, with some proprietary workflow software. Maybe we'll OCR them with Tesseract if we can get a box with enough CPU horsepower, rather than the virtual machine it's running on, for extra text-extraction points.
• Combine the files into an XML feed.
• Send the files to the front-end system. Probably Drupal, but possibly a Rails app, or McClatchy's own Workbench CMS.
• Display to the user with a combination of flash, jquery and CSS like so:

Shazaam! $35k saved.

Not to mention, jquery almost makes coding javascript fun. Almost.