Columnizer

The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. And, of course, it’s easy to use!

Get the source

Available on Github at https://github.com/adamwulf/Columnizer-jQuery-Plugin.

Stable Version: 1.6.0

Download It Here

Quick Start

To use columnizer, just call the columnize() function on your jQuery selection, and that’s it!

[code lang=”javascript”]

$(‘#mydiv’).columnize();

$(‘#myotherdiv’).columnize({ width: 200 });

$(‘#mythirddiv’).columnize({ columns: 2 });

[/code]

Release Candidate New Features!

Now you can manually specify line breaks for some or all of your columns! Set the new `manualBreaks` option to true to use only manual breaks without any auto-columnizing (false by default). Any node that has the CSS class `columnbreak` will act as a column break for that column.

Optionally prefix all of the CSS classes used by Columnizer to avoid conflicts with your other styles. Use the new `cssClassPrefix` to define the class prefix.

Stable Version New Features

Added jQuery 1.6 support

Fixed an infinite loop in a rare edge case if lastNeverTallest option was set and the content forced the last column to be tallest with dontsplit CSS class

Fixed an IE crash if “px” was included in the width option

renamed float option to columnFloat since float is a reserved word

accuracy (optional) tells columnizer the number of characters to look before splitting between words. smaller is more accurate for column breaks.

Fixed columnizer removing text nodes if they are immediate children of the columnized node

Removed hard-coded 3px padding. Columnizer now exactly estimates column widths instead of slightly underestimating widths and adding padding. This change may affect your CSS layout. See comment and explaination here.

Updated sample files

Stable Release Bug Fixes

Columnizer is now backwards compatible with older versions of jQuery

Fixed `lastNeverTallest` sometimes leaving a tall last column

Added a class to nodes that are split between columns. This helps you style 2nd half of paragraphs to not have leading first line space.

Non-visible text nodes will never end a column. This helps fix strangeness with dontend nodes still ending a column.

Fixed infinite loop with text that includes double spaces.

Demos

Sample 1: Simple text only columns. Text overflows from the top columns to the bottom columns. Sample 2: Text, images, and quotes being columnized. Also shows the use of the “dontend” class and lastNeverTallest option. Sample 3: Same as #2, but forced to 2 columns on top and 4 on bottom instead of dynamic columns Sample 4: Shows a single column that overflows into another section with 3 columns. Also shows how javascript event handlers are preserved for content that is columnized. Sample 5: Shows fixed width and height columns scrolling horizontally Sample 6: Uses the target option to prevent the content flicker between page load and columnizing. Sample 7: Shows the use of the “dontend class Sample 10: Layout a newsletter over multiple 2 column pages. Check this post for the motivation and explanation.

Documentation

Documentation is available on the Github repository’s wiki.

Helpful Hints

Any node that has the CSS class “dontsplit” won’t be split into multiple columns. This is handy to make sure that tables, etc, aren’t chopped in half if they land at the bottom of a column.

Any node that has the CSS class “dontend” will never be put at the end of a column

Any node that has the CSS class “removeiffirst” will be removed from the content if it is the first node in a column.

You can specify a rough width your columns, and Columnizer will create as many as will fit in the browser window. Just use: $(‘selector’).columnize({width: 400 }) syntax

You can specify a specific number of columns, and Columnizer will distribute your content between that many columns. Just use: $(‘selector’).columnize({columns: 2 }) syntax

When using the width and height options to scroll horizontally, make sure that the .column CSS class does not specify any padding or margin or border. See CSS for sample 5 for an example on how to create buffer between columns.

License

Columnizer by Adam Wulf is licensed under a Creative Commons Attribution 3.0 United States License.

Reporting Issues

For feature requests or bug reports, please file an issue at the Columnizer GitHub page.

Comments are closed. If you have feedback, please reach out at adamwulf.