Documentation

CSS Classes for Created Columns

Columnizer will add CSS classes to the columns it creates. Each column will have a "column" classname. The first column will have "first" and last column will have "last". This lets you target specific columns in your CSS markup more easily.

Options

CSS Classes

Helpful Hints

1. 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
2. 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
3. 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.
4. Make sure that you are columnizing visible content. If your content is display:none it may not columnize correctly. Try visibility:hidden and display:block instead.
5. Columnizer does not auto-class any of your content. See the Suggested Defaults For Your Content section.

Suggested Defaults For Your Content

Columnizer does not add default "dontsplit" or "dontend" classes to your content. If you are finding your content is breaking columns at awkward locations, try the following:

 $yourContent.find('table, thead, tbody, tfoot, colgroup, caption, label, legend, script, style, textarea, button, object, embed, tr, th, td, li, h1, h2, h3, h4, h5, h6, form').addClass('dontsplit');
 $yourContent.find('h1, h2, h3, h4, h5, h6').addClass('dontend');
 $yourContent.find('br').addClass('removeiflast').addClass('removeiffirst');

Uncolumnize

You can revert your columnized DOM by using the "uncolumnize" function.

$('selector').uncolumnize();

Troubleshooting

Why isn't my content columnizing?

Make sure that your content "has display". If the content you're columnizing has display:none, then the browser has difficulty estimating the size of some nodes, which makes columnizing impossible. instead of display:none, use visibility:hidden and keep display:block. then in the doneFunc() of columnizer, change the visibility and display to whatever your page or application needs.

Additional Notes

Minimize

To compress into a zip file, run compress.sh

Bug report?

Check the issues on the GitHub page