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,401 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:

  1. $(".halfColumns").columnize();

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

Cheers,

-Kevin Wentworth

Bookmark and Share

Tags for Auto Columns with Columnizer - My New Favorite Jquery Plugin

Jquery | Css | Example | Usability | Web Programming

Comments for this Posting

Posted by Ajinkya

on 31/1/11

nice.

Also, u can use

and you can set ur tag width of 299px or so on.

Posted by Ajinkya

on 31/1/11

Also, u can use "mcol" class under UL tag

and you can set ur LI tag width of 299px or so on.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design