Projects » Columnizer jQuery Plugin

Current Version: 1.4.0

Download it here: Download It Here Columnizer Plugin 1.4.0

Download the source

GitHub repo here, or:

$ git clone git://github.com/adamwulf/Columnizer-jQuery-Plugin.git
 

What Is It

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!

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

You can style your columns however you wish. Columnizer adds the following classes to the column divs it creates:

 .first.column { }
 .last.column { }
 .column { }
 

New This Version

  1. JavaScript events that were attached to content before it was columnized are now preserved for non-IE browsers. The workaround for IE: use the doneFunc option to reattach any event handlers after the content is columnized.
  2. doneFunc option is a function input that will be called when the content has finished columnizing.
  3. target option to specify where the content should be columnized. Now you can put all of your content into a hidden div, and have it columnized and displayed in it’s final location. This removes the content flicker when the page loads but hasn’t yet columnized.
  4. ignoreImageLoading (on by default) – when this option is set to false, Columnizer will try to wait until all images in the content have loaded before columnizing. This can help maintain more consistent column heights for [un]cached data. The preferred fix is to always specify a width and height for your images in your columnized content.
  5. float option lets you specify “left” or “right” floating for columns. Handy for right-to-left languages.
  6. lastNeverTallest boolean option ensures that the last column is never the tallest column.

Demo

Notes & Commentary!

Check out the Notes & Commentary section of the site – This is where I put fun links and smaller news items that aren’t quite important enough for the Front Page- so of course, it deserves a fantastic newspaper layout! Check it out!

This Page!

This page is using Columnizer to split the content into 2 columns. The code is only:

 $(function(){
 $('.dp-highlighter').addClass("dontsplit");
 $('li').addClass("dontsplit");
 $('.columnize').columnize();
 });
 

The first two lines keeps these syntax highlighting blocks from being split into multiple columns, and also keep list items from being chopped in half like paragraphs can be. The third line columnizes the content! That’s it!

Basic samples

  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

Advanced sample

  1. Sample 10: Layout a newsletter over multiple 2 column pages. Check this post for the motivation and explanation.

Documentation

Option Name Purpose
width a rough width your columns, and Columnizer will create as many as will fit in the browser window
height This option can only be used in conjunction with the width option. When both the width and height options are set, columns will continue to be built to those measurements to fill all of the content. This is useful for scrolling columns horizontally. See sample 5 for an example.
columns an alternative to the width option. Sets a static number of columns to build, regardless of widget.
target An optional CSS selector may be used here to determine where the columnized content should be placed. If a target is specified, the columnized node will remain unchanged, and the target node will contain columnized content.
doneFunc This function will be called when columnizing is complete.
ignoreImageLoading
true by default. If set to false, Columnizer will try to wait until images in the content have loaded before columnizing the data.
float default is “left”. Change to “right” for right to left languages.
lastNeverTallest
false by default. Set to true to ensure that the last column of the columnized content is not the tallest column.
buildOnce if buildOnce is false, the content will be re-columnized when the window is resized. If buildOnce is false, the content will only be columnized once.
overflow If this option is used, then a static height is set to the columnized content, and any content that does not fit within the height is put into the element specified by $(id). See demo 1 for an example.
height (required): the static height for the columnized content
id (required): The id of the element to put the remainder of the content
doneFunc (optional): a function to be called after the content has been columnized. This is a great place to columnize the remainder content.

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.

Feature Wish List

  • I plan on adding the ability to forcefully break a column – similar to Microsoft Word’s “Insert Column Break” feature.
  • Maybe I’ll also add a feature for “if you’re about to break column, please break here instead of later”, which would be useful for keeping Header tags from being the last item in a column, which looks really strange.
  • I’d love to write a TinyMCE plugin that would let you specify columned text in their Rich Text Area. That would be more than awesome.

Enjoy!

Thanks for your support, enjoy the plugin!

Creative Commons License
Columnizer by Adam Wulf is licensed under a Creative Commons Attribution 3.0 United States License.
Based on a work at staging.totheinter.net.

260 responses to “Columnizer jQuery Plugin”

  1. nir

    Hi
    your plugin is great.
    i’ve been sizing the font after a text is columnized. the text area now overflow, out of the size i defined.
    how can i make a call to columize again? or re-columnize?

    thanks
    Nir

  2. Mark S

    Great Plug-in!!

    Having some issue with adding more padding in between the columns.

    I set to use 2 cols, then I add a padding-right to .column and that “starts” to work, until I continue increasing the padding. Instead of making 2 skinnier columns, it forces it into 1 column, with what looks like the correct width.

    Appears like is just running out of room in the container and the 2nd ‘floated’ column shifts under the first… I also tried setting the width but that does the same thing. I go from a width of 220 to 221 and the cols change by way more than that one pixel. :)

    Any ideas?
    Thanks much !
    Mark

  3. Horus Kol

    I believe I have found a bug in this otherwise excellent script – I have a number of paragraphs which have the following structure:
    something

    The thing is – the first paragraph at the top of the column is coming out of the columnizer as …somethingsomething

    Somewhere between generating the document and calling the columnizer, the element is changing from display: inline to display: block – oddly, this isn’t happening when I start the paragraph with

  4. Horus Kol

    ah, whoops – need to entitize my code:

    I believe I have found a bug in this otherwise excellent script – I have a number of paragraphs which have the following structure:
    <p><strong>something</strong>…</p>

    The thing is – the first paragraph at the top of the column is coming out of the columnizer as <p>…<strong>something</strong><strong>something</strong>

    Somewhere between generating the document and calling the columnizer, the element is changing from display: inline to display: block – oddly, this isn’t happening when I start the paragraph with <span>

  5. Horus Kol

    I made a bit of a hacky fix:

    function columnize($putInHere, $pullOutHere, $parentColumn, height){
    while($parentColumn.height() < height &&
    $pullOutHere[0].childNodes.length &&
    $pullOutHere[0].childNodes[0].nodeName != 'STRONG'){
    $putInHere.append($pullOutHere[0].childNodes[0]);
    }

    not sure how best to generalise, though

  6. Ben Bunch

    Do you know if there is a way of merging the Columnizer with a paginating script? Essentially I am looking for a fixed size div that would slide the columnized text left and right. I have tried a few but I can’t keep the columns from spreading outside the bounds of the div section I want to paginate.

  7. Adam

    Having the same trouble as Mark S. It seems that using padding greater than 30px between columns forces the last column to become too wide…

    Can’t find a fix as yet – any suggestions would be greatly appreciated…

  8. Dan Carr » Iteration

    [...] but it looks like this site probably won’t need a plugin quite this complex, however Columnizer may be welcome for balancing two text [...]

  9. Text en columnes a les nostres pàgines web amb JQuery « arnaupujol.net

    [...] Per aquest motiu els dissenyadors acostumen a dividir el text en columnes. Evidentment a base de PHP podríem arribar a aconseguir aquesta divisió: per exemple comptant el nombre de caràcters del text, partint-lo entre el nombre de columnes i muntant-ne l’estructura fent substrings i tenint en compte no tallar cap paraula pel mig. Afortunadament podem utilitzar JQuery per a una solució més ràpida i fàcil; tot i que segurament hi ha molts plug-in de JQuery que facin el mateix jo utilitzo Columnizer [...]

  10. 40 Отличных плагинов jQuery для работы с данными и сетками | статей,статьи,статьи рф,кодекс статьи,статьи ук,статьи ук рф,скачать статью,уголовн

    [...] Columnizer [...]

1 4 5 6