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 Columnizer Plugin 1.6.0

Quick Start

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

 $('#mydiv').columnize();
 $('#myotherdiv').columnize({ width: 200 });
 $('#mythirddiv').columnize({ columns: 2 });
 

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

  1. Sample 1: Simple text only columns. Text overflows from the top columns to the bottom columns.
  2. Sample 2: Text, images, and quotes being columnized. Also shows the use of the “dontend” class and lastNeverTallest option.
  3. Sample 3: Same as #2, but forced to 2 columns on top and 4 on bottom instead of dynamic columns
  4. 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.
  5. Sample 5: Shows fixed width and height columns scrolling horizontally
  6. Sample 6: Uses the target option to prevent the content flicker between page load and columnizing.
  7. Sample 7: Shows the use of the “dontend class
  8. 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

Creative Commons 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.

Google Author link