Columnizer 1.0.1 Update

Small update to Columnizer and sample files:

1. Ability to set column pixel width or static number of columns
2. Column contents are constantly regenerated during resize instead of only during adding or removing a column
3. Inline CSS for columns no longer includes padding

The Plugin

Check out the Columnizer Project Page for download links and the latest news.

Check out the firstand second sample pages to see a fluid newspaper layout in action. Resize your browser window to see columns be automatically added based on available space. 😀 The new third sample page shows forced static number of columns instead of dynamic columns. The Columnizer Plugin can handly any html div, and can layout text, images, links, and nested tags into multiple columns on the fly.

The Code

The default setting lets you specify a column width, and Columnizer will auto add/remove columns of roughly that width to fill the browser window.

[code lang=’javascript’]
$(function(){
$(‘.wide’).columnize({width:400});
$(‘.thin’).columnize({width:200});
});
[/code]

Or – you can specify a static number of columns for your content:

[code lang=’javascript’]
$(function(){
$(‘.wide’).columnize({columns:2});
$(‘.thin’).columnize({columns:4});
});
[/code]

Styling your columns

When Columnizer generates columns, it gives each column a “column” CSS class. The first column also gets a “first” class, and the last column gets a “last” class. The 1.0.1 update no longer includes inline padding, so you can specify whatever your preference in your own stylesheet. To style your columns, just use:

[code lang=’css’]
.first .column { }
.last .column { }
.column { padding: 3px; }
[/code]