Columnizer jQuery Plugin

Current Version: 1.3.0

Download it here: Download It Here Columnizer Plugin 1.3.0

New This Version

Added height option to allow columns to be forced to specific width and height, regardless of window size. Useful for scrolling horizontally.

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 { }

Demo

Page 2!

Check out Page 2 of the site - Page 2 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!

Other samples

Sample 1: Simple text only columns. Text overflows from the top columns to the bottom columns.
Sample 2: Text, images, and quotes being columnized
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
Sample 5: Shows fixed width and height columns scrolling horizontally

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.
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!

Email This Page

47 Comments

47 responses so far ↓

1 jeremyBass // Jul 25, 2008 at 7:54 pm

so… this looks promising… when can IE stability be expected… (it’s 86% of the visitors to my site)
2 adam // Jul 25, 2008 at 8:46 pm

hopefully only by the end of the weekend, there’s not too much left to do.
3 jeremyBass // Jul 25, 2008 at 9:46 pm

Great… I think this is a grand idea (I’m sure we all have been wanting this) Keep up that good work there…
4 jeremyBass // Jul 26, 2008 at 4:43 am

this is pimpin… nice work… end weekend…lol
5 jeremyBass // Jul 26, 2008 at 6:16 am

So I was playing around with this… And I got sIFR to work mostly with it… when you resize the window I guess it ??rebuilds?? everything? so the sIFR drops off, I think… Got any ideas?

Check it out though… I think it’s cool…
http://corbensproducts.com/
it’s my beta site… I still see the odd errors come back when I injected the sIFR but other wise it all seems real stable… If I can get it to work better with sIFR that’d be cool… aways… great stuff..
jeremyBass
6 jeremyBass // Jul 26, 2008 at 9:58 am

So I’m really loving this now… Got sIFR to work with this a 100% in FF but still shakey in IE like 98%
(it’s the
$(window).resize(function() { if(!options.buildOnce && $.browser.msie){ if($inBox.data(”timeout”)){ …)
Even put shadowbox in which that works in FF but not yet in IE….

http://corbensproducts.com/

I think if I can get those last two issues wraped up for IE this will be one heck of a way to lay out a page…
7 adam // Jul 26, 2008 at 5:00 pm

awesome! looking good!

having it Columnizer continually rebuild the columns is exactly the problem. The way the algorithm currently works, there’s not an easy way for me to reuse dom elements as columns get resized/added/removed.

This is likely a solvable problem, but will take longer than a weekend

Cheers
8 adam // Jul 26, 2008 at 5:04 pm

One thought - I can easily add logic to only have Columnizer rebuild columns when the number of columns would change, instead of continuously during resize. I’ll also add a onColumnize option where you can add a function to be called once your layout has been columnized. this would be a perfect place to re-attach any listeners/shadowboxes/etc to the newly columnized dom.

And… that would be a weekend project - hopefully I’ll get it out the door soon
9 jeremyBass // Jul 26, 2008 at 8:22 pm

So here is a thought in this particular case there is a cookie size of 100kb in flash open for use… a command or two and all the elements needed to be copied, to be reused, would be there locally accessible… just a thought… anyways I like the plug-in able style, a place to re-attach…

Looks like a bright path here, I know I’m liking what I see… keep up the good stuff, I know I’ll be messing with all this for a grip…
jeremyBass
10 jeremyBass // Jul 27, 2008 at 12:16 am

Ok I thought I’d share a more real world type example.

http://corbensproducts.com/blogs

I’m going to play with it for a while… see if I can spot out some of the bugs…

What I have worked out so far, when I use the back button, I only get half the content in IE 6&7, and some redraw issues you already know about…

the real world example seems to be throwing thing up, but I’ll report back if there is anything of *crap that wasn’t suppose to happen*… anyways… great stuff man…
jeremyBass
11 jeremyBass // Jul 27, 2008 at 10:33 am

Ok so I spotted another error…. when resizing (again in IE) if you resize in window… there is a point where it’s doesn’t know if it wants to be one size or another… and if on was to leave it there is will crash IE… in FF I spotted something odd that I think Is do to the rebuilding… only half the data is there…

http://corbensproducts.com/blogs/

in IE you see 4 blogs and in FF you see 2… the source code show only 2 as well… not sure on that… seems that it’s the same with the IE back to the page deal (using back button or returning to the page) what at first confused me is that the source code reflected the same thing, ie the data was missing…
Sorry I keep coming back with items… but thought I should let you know… have a great one today…
jeremyBass
12 Mark Ross // Aug 29, 2008 at 1:29 pm

Great, and badly needed plugin - THANK YOU! It’s functioning beautifully, with one strange exception: IE6/7 does “column breaks” too “early” in every odd-numbered column. The line break occurs about 40 characters before it should. Any ideas?

Thanks for a great plug.
13 Adam R // Sep 4, 2008 at 9:21 am

Would there be a way to call the script again after page is loaded. I make changes to the text then need to columize again.
14 Adam Wulf // Sep 4, 2008 at 6:56 pm

@Adam

Once the text is columnized, there’s no way to re-columnize it if you make changes to the columnized DOM.

If you’re replacing the contents of the div with entirely new contents (and thus wiping out all the columns anyways), then you can just call $(thesamediv).columnize() all over again and you should be fine.
15 alex // Sep 8, 2008 at 11:19 pm

This looks really nice. Trying to download, the link just leads me back to Adam’s blog. Am I missing something?
16 Adam Wulf // Sep 8, 2008 at 11:29 pm

@alex

thanks for the heads up. it worked fine on my computer, but my wife’s computer did the same thing you’re seeing. odd.

anyways - link is updated and should work fine now.
17 graham // Sep 10, 2008 at 9:58 am

HI there,

Great plugin, thanks for creating it!

One question - is there any way to just use the vertical overflow columnizer function, without chopping it up horizontally? I h
18 alex // Sep 10, 2008 at 10:17 am

Link working now. Great Plugin–Thanks! I’ve also got a question about using the overflow columnizer. I want a single column of fixed width to overflow to a div with multiple columns, but when I limit the first div to a single column, or set its width via CSS, the changes are applied to the sibling and I just get one long column. Any tips?
19 Adam Wulf // Sep 10, 2008 at 1:48 pm

@graham,alex

this was a bug on how it handled single columns. I’ve updated the .zip, so re-download and give it another try.
20 Adam Wulf // Sep 10, 2008 at 1:49 pm

Als0–

I added sample 4 that does exactly that.
21 alex // Sep 10, 2008 at 2:06 pm

That’s it, the single column works great now. Thanks for the quick response. This is a great tool and I’m going to spread the word. Talk about filling a gap…

P.S. Your TinyMCE idea would be epic.
22 graham // Sep 11, 2008 at 2:45 am

wow, thanks for the super speedy update! That works great.

Agree on the TinyMCE idea
23 Adam R // Sep 11, 2008 at 10:48 pm

On FF & Safari second column is always longer with more content. Any Ideas?
24 Adam Wulf // Sep 12, 2008 at 3:51 pm

@Adam R

I’ve noticed that occasionally as well. Oddly enough, sometimes a page refresh ‘fixes’ it - and even then, only sometimes.

My next release of this will focus on enforcing column height/consistency - as well as speed improvements
25 JHMorales // Sep 22, 2008 at 1:59 am

Hi: I’m working now in a project of my blog in wordpress. I try to use this autocolumn with a “lightbox” like plugin for images, almost all works fine -specially Shutter Reloaded that is I’m using in this blog (Shutter Reloades is no framework dependant, so there would be no conflict).

But in IE6/7 and Opera9.5 the linked images in columns doesn’t display as “lightbox”, instead open in new window. In these browsers images outside autocolumn’s columns display the “lightbox” like image right.

FF 2/3, Chrome and winSafari all open right the Shutter linked images be in columns or not.

Another thing is that images places better in columns if they are wrapped in p tag. I think that wordpress wrap each text paragraph in p tag but not images, and so seems like the image is glued to its next paragraph and is placed together in the column with it.

I’m waiting for that IE6/7 bug fix, because this plugin is wonderful for my blog and I haven’t found no any other to make columns like this. Thanks a lot.
26 Marian P. // Sep 26, 2008 at 1:39 am

Yes, I have the exact same problem in IE6 with lightbox, a fix would be appreaciated.
27 Adam Wulf // Sep 26, 2008 at 9:10 am

@jh @marian,

definitely a priority on my list - i’ll try and get this out in the next release
28 MC // Oct 8, 2008 at 10:36 am

Nice work ! I was working for a website with Hebrew language. the align ın the plugin is set to left which is not appropriate. i added the FLOAT option, by default it is set to left. this can be changed on call like this ( $(’#column’).columnize({columns: 2, float: ‘right’}); ).

change made on line; 11, 143, 174 & 198
for line 11 u add this : ( float: ‘left’, )
for the other lınes you modify, ( float: right; ) by ( “+options.float+” )

wish thıs will be helpful !!!
29 Adam Wulf // Oct 8, 2008 at 2:45 pm

@MC

thanks for the tip! I’ll add that change into the next release.

Cheers!
30 Mariam Ayyash // Oct 9, 2008 at 12:37 am

hi, the zip download isnt working, i get 404 error, why?
31 JHMorales // Oct 9, 2008 at 6:19 am

Hi:
just a question, what is the use of lightbox_me? this is included in the download with the page, samples and images, but there i don´t see it working or doing ssomething.
32 Adam Wulf // Oct 9, 2008 at 2:44 pm

@Mariam

looks like I messed up the downloads when I migrated to WordPress MU. Everything should be working now. Give it another go.

@JH

There’s really no reason it’s in the .zip, I must’ve put it in there by accident.
33 Charkoal » JQuery - Basic Layouts & Panes // Oct 22, 2008 at 6:27 am

[...] view demo [...]
34 Kamil // Nov 13, 2008 at 11:22 am

Hi, maybe you could help.

We have a project that will need columnizer script but we will have to probably modify it slightly to adjust to horizontal scrolling. We wonder if the script will work like this: we set height of container and script generates number of columns needed to accommodate text in that container? Because we have a horizontal layout, columns will be scrolled horizontally not vertically.
35 show your doodles/illustrations/whatever - Page 12 - DesignersTalk // Nov 15, 2008 at 6:23 am

[...] Originally Posted by emil how do you do those columns in the blog, mr vibe? Hardcoding? If you don’t mind sharing, that is. Mr Paun, give this a looksee Columnizer jQuery Plugin | Wulf [...]
36 Adam Wulf // Nov 15, 2008 at 2:27 pm

@Kamil,

I’ve just released an update to Columnizer that should do what you need. Check out Sample 5 for horizontally scrolling columns.

Hope this helps out!
37 Jenny-fa // Nov 17, 2008 at 9:54 am

Hi, Adam… I’ve been having some issues with ordered and unordered lists. The two are always automatically closed whenever they occur at the end of a column and happen to exceed it… except that this oftentimes works to my disadvantage, resulting in lovely code like this:

<ul> <li>List item.</li> <li>List item.</li> <li>Something that's supposed to be all one item</li></ul></div></div></div><div class="column" style="width: 450px; float: left;"> <ul><li> and is instead split into a separate list item in the next column.</li></ul>

In addition, I’ve had empty list elements wind up at the end of column, and the lone, unexplained dot or number looks pretty awkward by itself.

Any ideas on how to rectify this?

Thanks for the great plugin in the meantime.
38 Adam Wulf // Nov 17, 2008 at 12:15 pm

@jenny-fa

You can use the “dontsplit” class to ensure an element is not split between two columns.

$('li').addClass("dontsplit");
39 Jenny-fa // Nov 17, 2008 at 4:36 pm

That really should be done automatically, though. >.<

Anyway, thanks.
40 Kamil // Nov 21, 2008 at 8:47 am

@Adam

Hey! This is perfect! Many thanks Adam,

greetings from all Merix team members ;),
41 JHMorales // Nov 27, 2008 at 4:24 am

Hi:
I’m using this plugin and works right, but I’ve get an issue I don’t know how to handle and I would like anybody help me. In my new blog http://www.jhmorales.es/blog/ the plugin works right but when I open a single post by clicking on any post title, then the plugin doesn’t works. And also all javascript stop function.
42 JHMorales // Nov 27, 2008 at 6:09 am

Hi again:
I’ve made some tests and fixed that issue in a non good way, in my opinion. I have to write all javascript entrances in header.php with the complete url reference. I don’t undertstand why wordpress lost the way of the scripts from index page to a single or archive post page.
43 Gary F // Nov 29, 2008 at 7:46 pm

This is a very smart plugin. Would it be possible to do something about the issue where you see the non-columnised text as the page loads, but when the page is ready it gets columnised. On larger pages (like the page 2 link here) I start reading the page but it quickly reformats so I have to start reading from the beginning again. IE is obviously the slowest with Chrome as perhaps the fastest.

Maybe a large “please wait…” message might be useful? Just a thought.
44 links for 2008-12-12 « Minesa IT // Dec 12, 2008 at 4:02 pm

[...] Columnizer jQuery Plugin | Wulf (tags: webdev webdesign text programming plugins plugin material js jquery layout) [...]
45 Andre // Dec 17, 2008 at 7:53 am

hi, thanks for your effort — great script.
i read that you plan to add the ability to forcefully break a column - similar to Microsoft Word’s “Insert Column Break” feature.

this would be awesome because it’s just what i’d need at the moment. i tried to make it myself but didn’t have sucess yet — do you have an idea when you’d implement that?
cheers
a
46 Ray Baker // Dec 23, 2008 at 7:24 pm

Hey I’ve been trying to get text within the columns to link to a thickbox window call and it doesn’t seem to work. Have you tested that? What about separate thickbox calls? I have two different thickbox links I need called within three columns and it disables them..
47 Jorge Yau » links for 2009-01-03 - Diseñador Web // Jan 3, 2009 at 9:01 am

[...] Columnizer jQuery Plugin | Wulf 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! (tags: webdesign jquery plugin javascript plugins programming webdev text typography tables) [...]

Wulf