COLUMNIZE Plugin – Split HTML Elements into Columns

This is just a simple plugin I wrote to split the elements of your choice into columns. (Thanks to my buddy Mark Drake for the help with some of the options)

Requirements

  1. Make sure your HTML has the latest version of jQuery attached

Download the Code

How to Use It

  1. Attach the columnize-v1.0.js script to your HTML page
  2. Attach the columnize-styles.css to your HTML
  3. Call the function on any group of items with the following syntax
$('.list-parent .list-item').columnize();

The default behavior splits the items up into 3 columns with even widths by percentage.

Use the following syntax to update the options with your own values.

$('.global-nav ul.root > li').columnize({
    columns: 6,
    itemwidth:200
});

Here’s a demo of the plugin on 2 separate lists. http://jsfiddle.net/fq8s7cLh/20

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

12 − 5 =