MainelyDesign.com Blog

Auto Columns with Columnizer - My New Favorite Jquery Plugin

Posted on 09/30/2009 at 10:37 am by Kevin Wentworth
Viewed 21,958 times | 2 comments

I was about to start coding a CakePHP helper that would analyze a bulleted list and split it into columns.  Starting to think about how I would approach this problem, my head began to hurt.  Then I found an awesome jQuery plugin- columnizer.

Unobtrusive Javascript Implementation

This is a perfect example of unobtrusive javascripting.  A browser without javascript sees one long list.  A javascript-enabled browser has an improved viewing experience...just the way it should be.

So simple to setup

Save the auto-column.js file and attach the .columnize() method to any element and it will automatically determine where to split the content to make columns.  I had a UL inside of a <div class="halfColumns"></div>.  I wanted to make the list into 2 equal columns. It's as simple as this:

This is the most basic use of this plugin. It's great the possibilities this plugin opens up.

Cheers,

-Kevin Wentworth