Columnizer jQuery Plugin

216 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) [...]

• 48 ZAP // Jan 7, 2009 at 12:15 am

  Love this script, but it’s giving me some grief…

  I thought that I had a slightly older version working fine, but then I started to notice that on some page the last sentence of the last paragraph in the last column was floating left (underneath the first column). This was happening in both IE7 and FF3. Adding the dontsplit class to the last paragraph fixes it, but it’s kind of a kludge.

  I tried updating to the latest version of the script, but in FF3 the second column was often much longer than the first, and refreshing the page never fixed it in my experience (not that I’d expect visitors to refresh the page). Since a lot of this site’s visitors and maintainers use FF, that’s too big of a glitch to ignore. I couldn’t make it work on my own, so I went back to the old version until the FF issue can be fixed.

  I’ll keep checking back to try out new versions, since this script definitely adds some distinctive styling to sites with a lot of text.

  Thanks for all the work!

• 49 Adam Wulf // Jan 7, 2009 at 1:23 am

  @zap,

  If you send me the URL i’ll try and debug why the last sentence isn’t columnizing correctly. Feel free to post it here in the comments or email it to me (my contact info is on the front page).

  I’ve been way busy lately, but I’m really hoping to fix some of these bugs (particularly the incorrect height bug) soon.

  thanks for using columnizer

  cheers

• 50 Andreas Schipplock // Jan 10, 2009 at 5:15 pm

  This jquery plugin is really a big time saver especially. Please keep it up .

• 51 Mario // Jan 16, 2009 at 5:12 am

  really good looking plugin indeed!

  still there is some issue when im using in with ui tabs.
  i was thinking to have columns in more then one page, but when i try to use it with jQuery ui tabs it seems that only one page is columnized (front page) and the other pages are ignored

• 52 MC // Jan 16, 2009 at 6:20 am

  Hello Mario,

  to resolve the issue you must use “livequery” plugin. whene you use ui-tab the new elements insert in the page aren’t known by the dom tree this mistake will be bypassed by the plugin above.

  link to the plugin, http://brandonaaron.net/docs/livequery/
  best regards, MC

• 53 Mario // Jan 16, 2009 at 8:20 am

  Oh, thx for the really quick answer!

  thx for the tip also. ill see what i can do…

• 54 Mario // Jan 16, 2009 at 8:29 am

  hello MC!
  im lookin @ it right now, but i really dont have a clue what should i do here!

  if you could drop some code of how to use it with ui tabs makrups i would appreciate it!

• 55 MC // Jan 16, 2009 at 9:10 am

  hello again !

  for exemple you that you have a DIV to columnize in your tab but that div is not initialised whene you start your columize. let say that the DIV name is “DIVINIT”. the solution will be something like this;

  $(‘#DIVINIT’).livequery(function(){
  $(this).columnize({});
  });

  this means, eachtime that you have new element on the page the DIV will be columnized again with no limit of renewal. the livequery plugin is really intersteing for dynamic generated content.

  for further details don’t hesitate

  best regards, MC

• 56 Mario // Jan 16, 2009 at 10:21 am

  thx a lot! with this one i can also use some other plugins along with ui tabs! thx for the tip&help again !!!
  cheers!!

  i’ll try this ASAP!

• 57 Mario // Jan 17, 2009 at 2:42 pm

  hello MC

  unfortunately im stuck ( im js. newbie)

  so let me see if i get this right:
  i initialized autocloumn.js and livequery.js
  - should i initialise columnizer like this?:

  $(function(){
  $(‘#DIVINIT’).columnize({});

  or do i have to use only this part (ie. initialization through livequery)?:
  $(’#DIVINIT’).livequery(function(){
  $(this).columnize({});
  });

  and secondly, should i put something instead of (this) in there or just live it as it is?

  i tried few things but nothing worked as i expected…

  thx!

• 58 Mario // Jan 17, 2009 at 7:12 pm

  i got it!

  i just initialized columnizer BEFORE i initialize ui tabs
  and then everything worked!!
  ie.
  $(’#DIVINIT’).livequery(function(){
  $(this).columnize({});
  });

  before this:
  jQuery(function() {
  jQuery(‘#container-1 ul’).tabs({});
  });
  thx MC this tip is a time and mind saver!
  it keeps things in (jQuery) family!

• 59 Steve // Jan 28, 2009 at 3:02 pm

  Does this plugin strips out scripts if the content you want to columnize contains a script such as AdSense scripts? i try it and it strips it and make the page go blank and still try to load the page (in a infinite loop). Any workout with this issue would be great.

• 60 Adam Wulf // Jan 28, 2009 at 3:46 pm

  Steve, can you post a URL / email me the URL of the broken page?

• 61 Steve // Jan 28, 2009 at 3:50 pm

  i’m still testing it out on my localhost. will send what i have (code) when i’m at my home machine.

• 62 The best of the jQuery tutorials and plugins | vitali software // Feb 4, 2009 at 6:50 pm

  [...] 3 – Columnizer jQuery Plugin [...]

• 63 My Little List of jQuery Tips, Tricks and Resources | Moral Fibre // Feb 5, 2009 at 2:52 am

  [...] Columnizer jQuery Plug-in [...]

• 64 LeoLeal // Feb 9, 2009 at 2:53 pm

  Can’t Wait for the “Break Column” Parameter on a future version! Looking forward to your Plug-In! Congratulations on this one…

• 65 ZAP // Feb 10, 2009 at 5:00 pm

  I’m finding that list elements at the end of the last column will often float left underneath the previous column when that column is not as tall as the last one. How can I adjust for this (other than adding more content to the first column)? The list isn’t being split (so adding the dontsplit class won’t help); the elements are just being floated and that allows them to bust out of their column div.

• 66 MC // Feb 11, 2009 at 3:48 am

  Hi ZAP,

  I don’t know exactly how is your code exactly, but let say that your have a div were in this one your want to split another one with columnizer. at the same time the columized div exceed the container parent and this what you want to forbid. this is maybe done when you add to the parent DIV the css attribute ( overflow : hidden ) but don’t specify a fixed height for this one. this will make the parent div follow the tallest div on it and at the same time forbid overflow on another elements.

  hope this will help

  best regards, MC

• 67 Julian // Feb 11, 2009 at 6:46 pm

  I am integrating the columniser plugin into a modx site. aprt from fiddling with the style option and removing inline padding on multicolumns like so

  style=’width:” + (Math.round(100 / numCols) – numCols*2)+ “%;

  I Have found this ensure I have the maximum possible padding and widths.

  HoeverI would like to may the first column longer so I can float a picture div with display:inline to the top right of the columns. This works but the columniser does not know about the stolen space. As a result the left column is too short. I cant figure out where in the code to make the first column higher with a supplied argument. Better still if columniser could look at the float div name and get its height, auto -adding it to column first that would be great. Any ideas?

  Julian, Old git programmer, Auckland NZ

  PS I have spelt columniser the NZ way!!

• 68 Adam Wulf // Feb 11, 2009 at 10:02 pm

  @Julian,

  try either/both setting the ignoreImageLoading option to false and setting the lastNeverTallest option to true

  if that doesn’t work, feel free to post/email the url and i’ll take a peek.

  cheers

• 69 Jingo // Feb 19, 2009 at 9:36 am

  Great work! But this is not working in Chrome for some reason. The text just all disappear after columnised…. Works fine for FF and IE

• 70 Jingo // Feb 19, 2009 at 9:46 am

  In fact I just added doneFunc option. I realised this function is only called in IE, but not in FF or Chrome, which means the columnising is never finished in FF or Chrome. any idea why’s that? Cheers guys.

• 71 MC // Feb 19, 2009 at 10:05 am

  Hi Jingo,

  I’ve tried the plugin in many browser and it works fine. give the link for the page were you did that to help you to solve the issue.

  best regards, MC

• 72 Jingo // Feb 19, 2009 at 10:14 am

  Hi MC thanks for the reply. Yeah I know it works fine in many browsers as in I’ve tried myself. But my scenario is a bit different, basically I do an Ajax call to the server and then write the result text to the page using jquery. And then I try to columnise the text. This website I’m developing requests login and I’m not allowed to give it away:( but I’ll do a dummy page and let you know.

• 73 MC // Feb 19, 2009 at 10:22 am

  Hi Jingo,

  ok for the acces. I think that you have DOM acces problem try using the livequery plugin. take a look at post n° 52.

  best regards, MC

• 74 Jingo // Feb 19, 2009 at 10:59 am

  hi MC, Brilliant – it’s working now. Cheers for the rapid help. Again – good work and thanks very much. Best,

• 75 Andre // Feb 19, 2009 at 11:18 am

  hi MC, i see it’s quite busy today in the forum
  i was looking in your script in oder to make a forced column break working — saw that it was on your feature wishlist ( “forcefully break a column”).
  would be so great to have this feature.. any progress in that? or a tip where i could start to modify the script?
  thanks!

• 76 MC // Feb 19, 2009 at 11:24 am

  Hi Jingo & Andre,

  I’m so glad that was helpfull for you Jingo. for you Andre, I’m sorry to tell u that columnizer isn’t mine. I just like this one and i have no time to tune it, this why I’m giving advices as I can. for your issure please tell me more maybe I have an Idea to fix it.

  best regards, MC

• 77 Andre // Feb 19, 2009 at 12:00 pm

  Hi MC,
  ups i saw you appearing so much in the comments with helpful tips, so i assumed you’re the author. then it’s even nicer of you that you’re helping out!
  well, i would like to have the posibility to force a column break into the next column. like a separator that i include in the text, f.ex “[BREAK]” and then the text would go into the next column.
  have a nice day!

• 78 MC // Feb 19, 2009 at 12:26 pm

  Hi Andre,

  it’s a nice idea !!! I think that is possible to do it. but i need some time to find how to do in a light way. i’ll be back to morrow with a solution.

  best regards, MC

• 79 Andre // Feb 19, 2009 at 12:54 pm

  Hey MC,
  you’re incredible, thanks so much. i wish my programming skills where more advanced, i couldn’t figure it out myself yet. cheers!

• 80 Julian // Feb 19, 2009 at 5:57 pm

  Dear Wulf,

  Did you get my screenshots about trying to make the fist column longer based on a floated image div [OUTSIDE] the columnizer divs and therefore make the first column longer by the height of that div to even everything up. Where in the code might I do that. I simply can’t figure it out.

  Julian

• 81 Adam Wulf // Feb 19, 2009 at 8:44 pm

  @Julian

  apologies! it got lost in my inbox, thanks for pinging me again, I just emailed you back, but I’ll post the example here for everyone else too: http://welcome.totheinter.net/autocolumn/sample8.html

  That new sample shows how to ensure that an image is always in the top right of the last column. In order to ensure that the last column isn’t terribly too tall, i used the overflow option and guestimated a height for the content.

  if content happens to overflow my guessed height, then it lands in the last_col div, which is floating right under all the columns, so it appears just to continue that last column.

  hope this helps!

  cheers

• 82 MC // Feb 20, 2009 at 8:00 am

  Hi Andre !

  I wish that I wasn’t late ! sorry but i have alot to do . I made some changes to the plugin in a separate file. here is the link to the demo page on sample4 “http://demo.linkinpro.com/MCcolumnize/”. think this will be helpfull. I’m going to lunch

  Best regards, MC

• 83 Maciek // Feb 23, 2009 at 4:22 am

  Hi!. It seems that your plugin doesn’t work with jquery 1.3.1
  Can you take a look at this?

• 84 JHMorales // Feb 23, 2009 at 5:38 am

  Hi:
  this plugin doesn’t works with the google api’s jquery version 1.3.1, but works fine with jquery 1.3.1 in my own site.

• 85 Andrew // Feb 23, 2009 at 1:06 pm

  Wulf.
  Great plugin.
  Feature request: (unless I’m missing something)
  I have a 3 column layout. I would like an option for telling the content to fill the columns without being split equally between all 3. It would just fill the first, then the second then the third possibly leaving the 3rd column empty.

• 86 Adam Wulf // Feb 26, 2009 at 5:17 pm

  @Andrew

  you can use the overflow option to specify a static height for your columns. if you specify a tall enough height, it should do exactly what you’re looking for.

  Cheers

• 87 Andre // Feb 26, 2009 at 9:51 pm

  ps: to try at home, here’s the zipped folder with the archives:

  http://primeclub.org/stuff/columns/columns.zip

• 88 Gerry King // Feb 27, 2009 at 11:37 am

  Great plugin – does what it says on the box. Just one question… licensing? I want to use it in a commercial web app but can’t expose the proprietary code so a permissive free software licence so MIT, BSD or LGPL would be fine, GPL would be a no-no.

• 89 Daniel // Feb 28, 2009 at 10:48 am

  @Julian

  where exactly did you put that code in?
  style=’width:” + (Math.round(100 / numCols) – numCols*2)+ “%;

  if i understand you right, this should make the columns as wide as possible in the users viewport, right?
  i tried to use your code on http://www.kunsteis.ch, but it did not work the way i want. i still have lots of space on the right side. any suggestions?

  cheers,
  daniel

• 90 Adam Wulf // Mar 2, 2009 at 1:10 pm

  @Gerry

  Just upated the page w/ Creative Commons license.

  Cheers

• 91 Andrew // Mar 3, 2009 at 5:20 pm

  Thanks for the response before, Wulf!
  New dilemma: I am pulling from a mysql db and tags are making content that follows disappear. It seems that only content within an element can survive the columnizing…

• 92 Andrew // Mar 3, 2009 at 6:40 pm

  That’s ‘br’ tags that are causing the disappearing

• 93 Andrew // Mar 3, 2009 at 6:46 pm

  @Wulf
  Just figured why I can’t use the overflow. The height needs to be dynamic…

• 94 Andrew // Mar 4, 2009 at 6:48 pm

  Can I not use ‘dontsplit’ on span tags?

• 95 James // Mar 16, 2009 at 4:56 pm

  thanks for the good work.

  I tried to implement it on a page and split the content into two columns, it does not seems to work if the content width is less than 500px. Any comment?

• 96 Adam Wulf // Mar 16, 2009 at 5:24 pm

  @James

  it should work fine for any width of content. URL?

• 97 James // Mar 17, 2009 at 10:52 am

  Hi Adam, thanks very much for the response.

  I also gave a try with the sample1.html. Here is what I tried:
  #wrapper { margin: 0px 100px; width:400px; }
  $(‘.wide’).columnize({width:190});
  (only changed two lines of the code)
  It turned out the first part displays only one column instead of expected two. I changed to different settings and none seemed to work.

• 98 James // Mar 17, 2009 at 10:58 am

  By the way, if I change the columnize to be 160 and keep the total w of 400, it did generate two cols, but the legnth of the two cols was not very well balanced. I guess it is related to the calculation functions

• 99 Louis Klibansky // Mar 18, 2009 at 5:19 pm

  Hi Adam,
  Great script!!!
  I’m using it now for the first time and have a question. It works grate but I would like to add a margin to the right site of the columns to give them more space to breath.

  I would also like to accomplish the following, namely, that the columns are only generated if the text exceeds a certain height.
  How would I go about that?

• 100 Louis Klibansky // Mar 18, 2009 at 5:38 pm

  Ah, I’ve got the adding margin part!
  Great script!

• 101 Piotr Godek // Mar 20, 2009 at 9:43 pm

  Great plugin

  i am wondering when you are planning to add the “insert break” feature? would be really helpful for not separating headers and content.

• 102 Andrew // Mar 23, 2009 at 12:58 pm

  Has anyone implemented this using TinyMCE? I am having problems with content not getting columnized when it should, maybe related to tall images?

• 103 Alex // Mar 23, 2009 at 4:37 pm

  Hi Adam,
  Great script! I am trying to incorporate it into a site setup with a static height that scrolls horizontally. I have a main container DIV for the site, and then module DIVs (class=”module”) that contain a header and the columnized text. These module DIVs are floated left to line up horizontally, but when I do that, the columnization isn’t happening. If I remove the float:left css on the module DIV the columnization works, but the module DIVs don’t arrange themselves next to each other horizontally as desired. Any idea why the columnization isn’t happening when the module DIVs are floated left?

  Here are the URLs:

  Module DIVs not floated, columnization works, but layout compromised:
  http://www.bluezoom.bz/test3.cfm

  Module DIVs floated left (layout as wanted), but no columnization:
  http://www.bluezoom.bz/test4.cfm

  Thanks for any help.

• 104 Adam Wulf // Mar 26, 2009 at 1:49 pm

  @alex

  i toyed with it a bit this morning and couldn’t figure out a quick work around for you. There’s definitely a bug in columnizer for how I handle horizontal scrolling, so i’ll try and get that fixed for the next version.

  until then, i’ll poke around a bit some more this weekend and try and find a workaround that’ll tide you over till the next version

• 105 Alex // Mar 26, 2009 at 2:18 pm

  @Adam

  Gotcha. I’m looking forward to the workaround! Thank you very much for your time.

• 106 Bart // Apr 1, 2009 at 10:04 am

  Hi Adam,

  I’ve tried out your plugin and I have to say that it works quite nicely, keep up the good work

  There is one thing I’m wondering though. If I have a container of 400px wide and I’d like to have 2 columns inside of this div of 200px wide each. So I tell columnize {width: 200} but I’m not getting 2 columns of 200px wide. I’m getting 2 columns that are 48% wide each. Why is that?

  Is there any way to get it pixel perfect the way I described?

• 107 Daniel // Apr 1, 2009 at 10:22 am

  @Bart

  I had that problem too. You have to modify the code on the lines 188, 256, 290, 298.

  1. Remove all paddings in the code
  2. Set width to 100% where it is 98%
  3. Change the (Math.round(100 / numCols) – 2) to (Math.round(1000 / numCols)/10)

  This way, it worked for me (tested on firefox and safari). Hope this helps.

• 108 Bart // Apr 1, 2009 at 4:05 pm

  @Daniel

  Nice. Indeed, this works Thanks a lot!

• 109 Milhaus // Apr 7, 2009 at 8:47 am

  I believe I discovered bug in your otherwise very useful script. I created simple page with heading and lists. The headings shouldn’t be at the bottom of column, so I added “dontend” class. But it is still at the bottom, as you can see on http://litomysl.org/columnizer/my_list.html or on the screenshot: http://litomysl.org/columnizer/my_list_test.png.

  Am I doing anything wrong? Thanks in advance.

• 110 jQuery columns plugin as in magazines « keckes // Apr 23, 2009 at 9:28 am

  [...] jQuery columns plugin as in magazines By kecke http://welcome.totheinter.net/columnizer-jquery-plugin/ [...]

• 111 The Usuals Supect // Apr 24, 2009 at 7:45 am

  Thanks so much for this amazing plugin. And thanks to Daniel too, for allowing the pixelperfect setup.

  I am really amazed how fast and simple this works.

• 112 The Usual Suspect // Apr 24, 2009 at 7:46 am

  upps, couldn’t even type the name right

• 113 shayne // Apr 26, 2009 at 4:51 pm

  Hey! Great script! I think it has a problem though.

  I have a chunk of text with an image embedded in it. The image has a css background that is an image. This seems to mess with the math and sometimes results in different renderings. Any ideas how I can fix this?

  Thanks!

• 114 6 Flexible jQuery Plugins To Control Webpage Layouts Easily :: Graficznie // May 19, 2009 at 9:18 pm

  [...] Columnizer [...]

• 115 jQuery Plugins To Control Webpage Layouts | Beat Fly Blog // Jun 22, 2009 at 4:03 am

  [...] Columnizer [...]

• 116 Nathan // Jun 22, 2009 at 8:29 am

  Hi Adam,

  This is a great plugin.

  One question, using a similar layout as Sample 5, with the fixed height, and horizontal scrolling, is there a way to set the height as a percentage? (say I set the height at 80%, and whatever the window size, each column would be 80% of the window height, and the contents would flow accordingly).

  Cheers!

• 117 Adam Wulf // Jun 22, 2009 at 8:46 pm

  @nathan, columnizer doesn’t have native support for % based heights. You would need to register an onresize listener for the window, and then determine the pixel height for the % you need, and then re-columnize based on that.

  Cheers

• 118 Aaron Gustafson // Jun 24, 2009 at 10:54 am

  It would be great to see this implemented as an extension via eCSStender (http://ecsstender.org) so it could be run right from the CSS. Let me know if you’re interested in getting in on the beta.

• 119 güvercin // Jul 1, 2009 at 5:32 am

  how can i download this code ?

• 120 Columnizer jQuery Plugin | Wulf - ASP.NET // Jul 22, 2009 at 12:49 pm

  [...] Columnizer jQuery Plugin | Wulf Published Feb 07 2009, 06:16 by Stuart Manning Filed under: jQuery [...]

• 121 Andrei Alecu // Jul 22, 2009 at 5:49 pm

  There’s a pretty nasty crash bug if you’re calling .columnize() when your container only has 1 item.

  For example, if you’re calling columnize on a div that only has a single div within it which has the ‘dontsplit’ class it will cause an infinite loop condition causing the browser to stop the script.

  I have temporarily fixed it by adding the following line underneath the columnize definition:

  $.fn.columnize = function(options) {
  if (this.length <= 1) return;

• 122 Andrei Alecu // Jul 22, 2009 at 5:57 pm

  Oops, I meant
  if (this.children().length <= 1) return;

• 123 Rebel Scholar Launched! « David Chiu // Jul 24, 2009 at 8:55 pm

  [...] of Safari, Firefox and Chrome. Another option is to use a fancy jQuery plugin such as Columnize (http://welcome.totheinter.net/columnizer-jquery-plugin/) but what I found is that you can’t (yet) control where the column break happens, and also [...]

• 124 Spice up your WordPress theme with jQuery // Aug 3, 2009 at 10:35 am

  [...] Luckily there is a solution in the form of a plugin: The Columnizer jQuery Plugin [...]

• 125 Matis Masters // Aug 5, 2009 at 4:35 pm

  Hi everyone. I found an issue, i got FF crashing when i was trying to use the height and width parameteres to make a horizontal scrollable list of columns, for a WordPress blog, that wanted to have the posts showing as a book, so 2 columns per page. The problem i found it was that i got on an infinte loop while using height, because in this block:
  
while((i 1) || parseInt(i/2) != (i/2)){
if($inBox.children().length <= i){
// we ran out of columns, make another
$inBox.append($("")); //"
}
var $col = $inBox.children().eq(i);
columnize($col, $destroyable, $col, targetHeight);
// make sure that the last item in the column isn't a "dontend"
if(!$destroyable.children().find(":first-child").hasClass("dontend")){
split($col, $destroyable, $col, targetHeight);
}else{
// alert("not splitting a dontend");
}
while(checkDontEndColumn($col.children(":last").length && $col.children(":last").get(0))){
var $lastKid = $col.children(":last");
$lastKid.remove();
$destroyable.prepend($lastKid);
}
i++;
}

  $destroyable.children().length>1
  I changed to that and it works. i think it has something to do with no having a “dontendcolumn” node inside.
  Bye bye

• 126 Nathan // Aug 7, 2009 at 3:24 am

  Hey Adam,

  I tried using onresize to work out the height, but performance was a patchy, so let it go. I did find this worked quite well, setting the height on load:

  var windowHeight = $(window).height();
  if (windowHeight > “940″) var gridHeight = 760;
  if (windowHeight < “940″) var gridHeight = 580;
  $(“#grid”).columnize({width : 180,height: gridHeight,buildOnce: true});

  A new question though,
  when using scroll columns horizontally, by setting the height, is there an easy way of setting two different sets of columns, side by side.

  Say if I had one lot of content, with a column width of 300px. After however many columns it needs, a second lot of content starts with a width of say 200px.

  I’ve tried setting a containing div around the second set of columns, and then setting the padding to the left based on the width of the containing div around the first set of columns – but that doesn’t work columnizer always sets the width to 100%, and the columns always go funny when the second column runs over the right edge of the page.

  Thanks for the time, I’m sure my strange help requests don’t help

• 127 David Wainwright // Aug 24, 2009 at 11:25 am

  I’m calling a handler via getJSON and loading a div with markup generated from the results. My script then runs columnize on that div. However if I set lastNeverTallest to true and the results only fill one column, the browser crashes (IE8 or FF3).

• 128 David Wainwright // Aug 24, 2009 at 11:26 am

  When I say crashes, I mean it goes into an infinite loop – sorry!

• 129 Matt Hawke // Aug 24, 2009 at 10:33 pm

  Hi Adam,

  First of all, great plugin – I love the instant usability without the need for any customisation.

  That said, I did some customisation to my implementation of Columnizer; specifically, adding .removeiffirst and .removeiflast to all HR elements. However, the elements weren’t being removed correctly.

  I did some investigation and found that changing the final lines of the plugin script from find(‘:first.removeiffirst’) to find(‘:first-child.removeiffirst’), and the equivalent for removeiflast, gives me the functionality I expected.

  HTH

  M

• 130 11 Classic CSS Techniques Made Simple With CSS3 | Web Tutorials // Sep 8, 2009 at 2:13 pm

  [...] correctly. Normally you would separate the content into divs and float those divs, but I found a jQuery plugin which dynamically renders the [...]

• 131 11 Classic CSS Techniques Made Simple with CSS3 : Webby Tutos // Sep 9, 2009 at 2:43 pm

  [...] correctly. Normally you would separate the content into divs and float those divs, but I found a jQuery plugin which dynamically renders the [...]

• 132 Daniel // Sep 28, 2009 at 3:19 pm

  Hi,

  I’m workiong with Ajax and i make a request to the server in the normal way(not using framewoks), this is for change the text of one div, when i’m trying to build the columns again with the new information the script doesn’t work, how can i solve this issue??

  Sorry for my english.

  Thanks

• 133 Nikita Nemkin // Oct 1, 2009 at 5:41 am

  Hi. This plugin is like a magic, amazing.

  I have a feature request: when column split creates new elements (at the beginning of the column), mark them with special class, like “synthetic”. This helps when theming a columnized nested list.

• 134 Dominic // Oct 3, 2009 at 2:14 pm

  Great work

  One thing I discovered though was that the YUI Compressor will not compress it, complaining of errors.

  The solution was to change any reference to the float option to use quotes, ie.

  var defaults = {… ‘float’:'left’…}

  and options.float becomes options['float'].

  I came across this problem as I concatenate and compress all my js into a single file.

  Keep up the great work!

• 135 Will // Oct 9, 2009 at 11:18 am

  If the container has a style display:none, then columnizer can’t calculate height or width. This is a problem with columnizer, but I can’t figure out how to work around it.

• 136 Jon // Oct 14, 2009 at 5:43 pm

  Very nice plugin! This will come in handy for a project I’m working on.

  Btw, is there a way to have an image span across 2 columns and have the text wrap around it? (e.g., http://www.alistapart.com/d/crosscolumn/example6.html )

• 137 spacewalk // Oct 28, 2009 at 3:56 pm

  Great plugin. Thank you.

  I would like to use the class “dontsplit” on tags, but when I add the class, Mac Safari and Firefox both complain about a “slow” or “unresponsive” script.

  Anybody else seen this? Any ideas for getting around this?

• 138 Nathan // Oct 28, 2009 at 5:47 pm

  Spacewalk – I had the same issue, it’s when the last item has ‘dontsplit’ where it goes funny. I just add an empty div or li at the end, without the dontsplit class, and it all behaves nicely then.

• 139 spacewalk // Oct 28, 2009 at 6:27 pm

  Many thanks, Nathan. That fixed it for me.

• 140 spacewalk // Oct 31, 2009 at 8:23 am

  Well, adding a final li tag without the “dontsplit” class *did* fix it for me, temporarily. However, now for no reason that I can see, columnizer is again producing “slow or unresponsive script” dialogs in the browser. I’ve removed the “dontsplit” class from my li tags and it still won’t work. To my knowledge, I changed nothing. When I got it working with “dontsplit,” it was working very well. I’m sorry to lose it. Has anybody else been here?

• 141 apaunganhote // Nov 2, 2009 at 12:11 am

  Hi,

  It’s the one that i have been looking for. But only one thing i want to ask,

  I have the one table, with 6 column. One table have fixed width and height, if one column text has been exceed to the width, text will wrap into the next column, when 6 column is excceed, i want to create another new table with 6 columns to wrap the text again.

  Can it be done with this plugin ? Any idea ? Thank you so much.

  With Regards,

• 142 paketev // Nov 16, 2009 at 6:39 am

  very nice
  thanks

• 143 Keith // Nov 16, 2009 at 9:24 pm

  First of all thanks for this plugin. It’s truly awesome.

  I’m running through some trouble with an aspect of it.
  If I want to make a link that contains some elements (let’s assume a h1, and a few p’s altogether) and try to change it’s background color on hover state, it has a strange behavior. First of all, the content won’t have a different background color and second, the only place that will actually change its bgcolor is a small square immediately above the place I selected.

  I hope you guys understood what I mean and if someone has run into this problem, can you explain how’d solved it?

  Thanks again

• 144 Linda // Dec 1, 2009 at 12:58 pm

  Awesome! Thank you SO much for this!
  Needed to find a solution like this for the Drupal project i’m working on and where one part concerns categories being listed in columns – and luckily I stumbled upon your posted comment on Drupals site which lead me to here. It was so easy to set up and works like a charm!

• 145 Appel // Dec 26, 2009 at 1:01 pm

  Great plugin! If you’re having trouble using it in combination with Cufón, try placing the Cufón js src calls below the columnize() function. Worked in my case.

  Merry christmas!

• 146 Ken // Jan 6, 2010 at 10:15 am

  Really great plugin, exactly what i needed, been having problems with the text disappearing though. I’ve tried livequery as well to no luck as well.

  Here’s the page: http://kzdesigns.com/development/#/interior/

  Try clicking on the Philosophy button, you can see the content is missing in the div that’s columnized. Compare with the other Philosophy buttons below without columnizing.

  Appreciate any help at all!

  Ken

• 147 webweaver // Jan 11, 2010 at 10:54 am

  Wow – a solution to one of the most difficult layout issues – getting a dynamically-generated unordered list to split nicely into two columns when required. Completely awesome and a solution I haven’t seen anywhere else. GREAT plugin!

  I’ve blogged about that specific aspect of your plugin, because I really haven’t seen it solved anywhere else, and I wanted to flag the fact that you have figured out this solution. I added a bit of jQuery so that my column fills the full width of the space until it contains too many list items, at which point your plugin kicks in and separates the list into two half-width columns.

  http://webweaversworld.blogspot.com/2010/01/cssjquery-solution-for-creating-multi.html

  Thank you so much!

• 148 Rafi B. // Jan 23, 2010 at 11:44 am

  Awesome stuff! Any repository for this? Join Github!

• 149 Tom Bond // Feb 1, 2010 at 9:12 pm

  Hi Adam, and any other clever people that can help.. I really like this plugin and have it running on a dev server here for an upcoming project. It runs brilliantly on the browser. What I want to do though print this page.

  Is there a way to get Columniser to close the columned div it’s built before the page break (so the content columnizes on that printed page independently) and starts a fresh columnizing div on the next printed page? Currently, it continues the columnized content on the next page (in the same column) and at the end of that one, you have to go back to the previous page, to the top of the next column. Not really ideal.

  I think this might be quite tricky to sort across browsers, and I’m not much of a scripter I’m afraid. Any help appreciated.

• 150 Appel // Feb 2, 2010 at 6:04 pm

  Hm, it seems this plugin is incompatible with jquery 1.4.x.

• 151 Adam Wulf // Feb 3, 2010 at 7:17 pm

  @Tom,

  Check out http://welcome.totheinter.net/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/

• 152 rcon // Feb 4, 2010 at 3:52 am

  This plugin is brilliant! I love it.

  I’m running into a vexing problem though. I columnize content from a hidden div into a target div using 3 columns. It distributes only one paragraph in each of the first two columns and then puts all the remaining paragraphs into the last column. But the especially weird thing is that when the browser window resizes, it dynamically corrects and the content is distributed evenly. Adding lastNeverTallest: true doesn’t seem to change anything. Happens on FF, Safari, Chrome, and Opera so far. Any suggestions?

  http://www.shadowshapes.com/uttwerk/#about

  Thanks!

• 153 Maxim // Feb 10, 2010 at 6:01 am

  Hi Adam.
  Please help! How to make three columns by 33%

• 154 Asfahaan // Feb 13, 2010 at 6:03 am

  Hi,

  I am having problem using autocolumn.js wtih cufon-yui.js.

  Within the content I am using Cufon to generate custom headings. However, when using with Columnizer – the headings are disappearing.

  Cufon.replace(‘#content-header .title’, { fontFamily: ‘HelveticaNeueLTCom’ });
  Cufon.replace(‘h2′, { fontFamily: ‘HelveticaNeueLTComMenu’ });
  Cufon.replace(‘h3′, { fontFamily: ‘HelveticaNeueLTCom’ });
  Cufon.replace(‘h4′, { fontFamily: ‘HelveticaNeueLTCom’ });
  Cufon.replace(‘#block-menu-primary-links ul.menu li a’, { fontFamily: ‘HelveticaNeueLTComMenu’ });

  $(function(){
  $(‘.wide’).columnize({width:250});
  $(‘.thin’).columnize({width:200});
  });

  Could someone help me out. So I dont have this conflict.

  Thanks,
  Asfahaan

• 155 Asfahaan // Feb 13, 2010 at 6:09 am

  Here is the full head code http://code-bin.homedns.org/500

  You might see some strange things in there. Its for a drupal theme.
  Thanks in advance.

  PS: I tried changing the order of scripts with no success.

• 156 Kovancılar // Feb 14, 2010 at 1:19 pm

  thanx good code

• 157 jeansienkin // Mar 3, 2010 at 10:53 am

  Wow, this is terrific! thank you so much!!!! true typography is coming to the web!! great great great!

• 158 rcon // Mar 5, 2010 at 5:13 pm

  following up my own comment…

  setting ‘buildOnce:true’ makes it stay broken. so it seems to need to build more than once to render correctly? guess its time to sift through the source to see whats going on…

• 159 Shubham // Mar 9, 2010 at 6:59 am

  Well thanks for the code..!

• 160 Elisabeth // Mar 10, 2010 at 6:22 am

  Hi!

  I’m using columnizer on a site but when I opened the site in IETester’s IE6 I got a javascript error that said:

  “An error has occured in a script on this page.
  Line: 404
  Char: 6
  Error: Syntax error
  Code 0
  …”

  The error didn’t not occur when I didn’t include autocolumn.js, so it must be something in the columnizer code.

  I changed to autocolumn.min.js instead and the error disappeared.

• 161 Karakocan // Mar 14, 2010 at 7:09 pm

  Thanks for the plugin

• 162 Mike Berg // Mar 22, 2010 at 1:00 am

  I would love to see the “column break” feature, as my “sitemap-style” footer navigation would look much better if the subpages stayed in the same column as their parent page: http://fairness.ncsl.ca/

  Thanks, though, this plugin is amazing!

• 163 SigoTratando // Mar 22, 2010 at 4:44 pm

  Greetings! I’m in the process of setting up a blog for someone where this concept would come in seriously handy. However, he is not a tekky, so expecting him to understand how to code classes and such would be stretch.

  What I’m wondering is whether there is a WordPress-plugin version of this whereby he can add a new “list” item (some item that fills the column that wraps)?

  Thanks! And thanks for a super-awesome plugin.

• 164 iRolf // Mar 27, 2010 at 5:16 am

  thank you for that plugin and the excellent documentation. awesome!

• 165 Harper Lieblich // Mar 29, 2010 at 11:19 pm

  This plugin is awesome. Adam you rock!

  I’m a designer and my Javascript skills are non-existant but I was able to implement your plugin fairly painlessly. I’m currently using it in a wordpress theme. Will post link when it’s done.

  Thanks again!

• 166 Leandro // Mar 30, 2010 at 4:58 pm

  Thanks Adam, this is really usefull. Good work!

• 167 Caleb // Apr 2, 2010 at 2:44 pm

  Hi all,

  I just installed this plug in and have it working great on FF but on IE it doesn’t display at all. Any idea why that is? I can view this site and the examples fine in IE but on my own site it just doesn’t show anything.

  im using:

  $(‘#bhv1-content’).columnize({
  columns : 2,
  buildOnce : true,
  accuracy : 20,
  overflow : {
  id : “#content_box:not(.single) #content”,
  height : 900,
  accuracy : 70,
  doneFunc : function(){
  $(‘#content_box:not(.single) #content’).columnize({ columns : 3 });
  }
  }
  });

  please advise =)

• 168 Sophia // Apr 8, 2010 at 12:08 pm

  I load the script after jquery in the footer but it just does not work. The according text is loaded with PHP script into a tab. Can anybody help?

  I initialize tabs and columnizer as follows:
  $(“.col”).livequery(function() {
  $(this).columnize({ width: 400 });
  });
  $(function() {
  $(“ul.tabs”).tabs(“> .pane”);
  });

  Thank you!

• 169 Jeff // Apr 9, 2010 at 12:15 am

  I’m having issues with this displaying in IE as well. All other browsers I’ve tested using both a PC and Mac display fine, but IE doesn’t do much.

  $rw_t_of(function(){
  $rw_t_of(‘.dp-highlighter’).addClass(“dontsplit”);
  $rw_t_of(‘ul’).addClass(“dontsplit”);
  $rw_t_of(‘li’).addClass(“dontsplit”);
  $rw_t_of(‘.%id=tofsDivUniqueID%’).columnize({
  columns: 4,
  buildOnce: false,
  ignoreImageLoading: false
  });
  });

• 170 Sophia // Apr 13, 2010 at 9:58 am

  I am still battling with reading out content to a TABS structure with a PHP script and columnizing it. I use liverquery and initialize Columnizer after initializing TABS (there is no result the other way around!). It seems that Columnizer is only grabbing some of the content. Analyzing the situation with Firebug informed me that Columnizer created many nested columns for each requested column. How can I persuade Columnizer to do its work when the content is completely read out instead of working during the run of the script? Thanks for your help!

• 171 marja beckers // Apr 20, 2010 at 6:22 am

  Thanks this works great!
  Would it be possible to get this working in html5?

  I would like this to output to an tag (within a tag) instead of using divs, but my jquery skills are not on a level that I can chang your script.

  Any tips?

• 172 Jared Sommers // Apr 20, 2010 at 12:50 pm

  When using text-align justify and columnizer with a specified height, for some reason Chrome(newest) on mac does not fill out the bottom lines completely.

  You will see only one or two words per column in those bottom lines.

  Any idea of a fix for this?

• 173 Ivan // Apr 22, 2010 at 3:25 am

  When using width & height the transformation to multiple columns fails when the browser window is too small (in fact too narrow).

  You can test this by opening sample 6. If you make the browser window narrow (the width of 1 or less columns) and hit refresh, the transformation is done to 1 single column. When resizing the window after this, the width of the column follows the width of the browser window.

  Any ideas how I can force it to columnize?

• 174 Jesse // Apr 24, 2010 at 10:29 am

  For the following:

  $(‘#postContainer’).columnize({lastNeverTallest: true, columns: 2, width: 318});

  for the element contained in postContainer, if it is the only element in postContainer, this script causes an “unresponsive script” error and can crash my browser:

  Columnizing an element with only one child with class “dontsplit” in combination with lastnevertallest: true is the cause of this.

  This might seem like an obscure situation, but I’m using this on a wordpress site, where the blog posts are columnized, and when you are on the last page of posts, there is only one post on the page (class=”dontsplit”) so it freezes the entire site.

  Other than that, thanks for the great work!

• 175 Todd Dominey // Apr 26, 2010 at 4:17 pm

  “I plan on adding the ability to forcefully break a column”

  Awesome! That’s what I’m looking for.

• 176 wespai // Apr 28, 2010 at 4:47 am

  nice plugin

• 177 Gary Byrd // Apr 29, 2010 at 4:35 pm

  Does the content need to be placed in a surrounding tag for it to display? I can’t seem to get anything to display if its not wrapped in an “h” tag or a “p” tag.

• 178 Nathan // May 10, 2010 at 8:41 pm

  I’m wondering if there’s a way, when using the width option, for the plugin to only generate as many columns as needed for the content, rather than as many columns will fit in the browser window / parent element. This would be useful for when you’re placing additional elements along side columned content. (Say you have an entirely horizontal scrolling layout).

  Can I also suggest that it might be better to use display: inline-block on the columns (with white-space: nowrap on the targeted div) instead of float: left? Just a thought.

• 179 Rolf // May 11, 2010 at 2:26 am

  Hi,
  Can I use columnizer to display long source code listings split into columns, however start splitting only, when it does’n fit in a column? So I have a page layout (s5 slides!)
  —————-
  | Title or description, (dontsplit)
  —————-
  | Listing
  | line 1 | line n+1
  | line 2 | line n+2
  | … | …
  | line n
  ———————

  The overall height can be set to a fixed value, the height of the dontsplit area is variable, the number of lines that fit in one column must be computed.

  Regards Rolf

• 180 Maciej // May 23, 2010 at 4:47 pm

  Hi! I have made a polish tutorial of columnizer plugin! You can find it at my site.

• 181 Patrick // Jun 11, 2010 at 7:49 am

  thanks,

  This work great. However I have an issue in IE when I use it:

  ‘nodeType’ is null or not an object eval code, line 1 character 23039

  This is the part of code causing the error:

  if(f.nodeType==3||f.nodeType==8)return;

  f is undefined

  thanks

• 182 Simon // Jun 14, 2010 at 11:09 am

  Great plugin!

  Except in IE 6 & 7 :S
  In IE 6/7 only the first div gets columnized while the rest stays normal.
  I’m using it in combination with coda-slider, and it works great in IE8, FF and Safari but not IE 6/7.
  Anyone that has had similar problems?

• 183 Raul Riera // Jun 15, 2010 at 6:35 pm

  It would be nice to be able to specify a “gap” for the columns… just like CSS3

• 184 Matt Hawke // Jun 15, 2010 at 7:19 pm

  @Raul Riera: to get a gap between columns, I use the following:

  $(‘.column:not(.first)’).css(‘margin-left’, ’10px’);

• 185 Raul Riera // Jun 15, 2010 at 8:54 pm

  @Matt.

  Thanks that saved me

• 186 npy // Jun 16, 2010 at 4:02 pm

  hey!

  it is possible to made this plugin work with code like below:

  long-text-here

  long-text-here

  where each class=”col” div have ‘float: left’ property (so we got columnized layout with multiple text-col’s inside each div-content) and they dont have width property set (depends on
  content)

  When i’m trying to make this like in above example whole content simply dissapears…

  sry for my bad eng :<

• 187 npy // Jun 16, 2010 at 4:04 pm

  
  		long-text-here
  
  		long-text-here
  

  and code here ^^

• 188 npy // Jun 16, 2010 at 4:15 pm

  http://img20.imageshack.us/f/65365377.png/

  hope this will help u understand what i want achieve

• 189 Graeme Blackwood // Jun 18, 2010 at 11:18 am

  Great plugin! Really quite impressive, and perfect for the articles pages of the new Bygone Kent website: http://www.bygonekent.org.uk/article/darwins-dangerous-idea

• 190 Harper // Jun 25, 2010 at 10:27 am

  Does anybody know of a way to get an image to span multiple columns and have the text wrap around it?

  http://www.harperlieblich.com/Testing/index.html

  Thanks.

• 191 Chris // Jun 30, 2010 at 8:25 am

  Adam-

  All of your internal links are pointing to your staging domain, so it makes it a little difficult to view the samples/demos.

  -Chris

• 192 Jeremy // Jun 30, 2010 at 4:56 pm

  fyi, most samples above link to a pw-protected staging server… I had to use the one link way down in the comments to find a demo…

  feel free to delete the comment…

• 193 10 jQuery Plugins to Help with Web Page Layouts | DX Articles // Jul 1, 2010 at 8:11 am

  [...] Columnizer [...]

• 194 Suneel // Jul 1, 2010 at 10:56 am

  This would be very helpful to my client’s website.

  Thanks for sharing.

• 195 Jonathan Schofield // Jul 2, 2010 at 5:55 am

  This looks like a great plugin. Apologies if this already covered in the very long comments above but…

  Does this plugin apply its magic unconditionally in all browsers good enough for jQuery?

  If the answer is yes, I’d rather it didn’t in browsers that already have CSS3 multi-column support.

  I guess for the most part I’m asking if it can be configured to only interject for Explorer 8 and under (I’m assuming that multi column support is coming in IE9 but am not sure). Is there a jQuery support method for testing for multi-column capability (again, not sure)?

  If this plugin doesn’t have such context sensitivity I guess I could apply it selectively through an IE conditional comment.

  Any thoughts?

• 196 Jonathan Schofield // Jul 2, 2010 at 5:57 am

  On another note, did you know your Notes and Commentary page isn’t working? Something up with your staging server.

• 197 Jonathan Schofield // Jul 2, 2010 at 5:58 am

  On another note, did you know that there is something up with your staging server which your Notes & Commentary link goes to?… http://page2.welcome.totheinter.net/

• 198 Jonathan Schofield // Jul 2, 2010 at 6:00 am

  Why can’t I post with a link or full URL string?

  I’m trying to tell you there’s something up with your staging server link for Notes & Commentaries.

• 199 Jonathan Schofield // Jul 2, 2010 at 6:18 am

  Oops, sorry, there was a delay to those comments appearing and they appeared to me to be going nowhere with no error message!

  I’ve just taken a look at PPK’s excellent CSS3 compatibility table and it seems what’s coming down the road in IE9 isn’t exactly earth shattering:

  * Excellent support for CSS3 selectors and background properties

  * Not so good for other property declarations — most notably, no support for multiple columns.
  

• 200 The very usable web page elements layout open source projects « Newsicare // Jul 6, 2010 at 5:48 pm

  [...] Adam Wulf, currently living in Portland, OR, US, made columnizer-jquery-plugin, good for fixed number of columns, but can not get irregular structure layout – flow layout [...]

• 201 Adam Wulf // Jul 8, 2010 at 2:24 am

  Sorry for the confusion re: links + demos. everything should be back up now

• 202 jesse // Jul 12, 2010 at 5:18 am

  Hi Adam,

  i noticed that there’s something weird going on with columnized forms. The tag gets closed on the end of the column and opened again in the next one. Is there any way to fix this or did I overlook something?

  Any hint would be greatly appreciated!

• 203 Jeremy // Jul 12, 2010 at 10:57 am

  @adam: try putting a div or another container inside the form element to be used for the columnization effect. perhaps a fieldset or something similar would be more semantically correct. in doing so, you pull the effect of breaking the element up into multiple versions away from a form element (which needs to be the one and only element for the form to work), and into a child element that can be split up without issue.

• 204 Oliver Sahner // Jul 13, 2010 at 8:03 am

  A small fix for calculating the width of the parent Container (including margin/padding/border etc.).

  line 378:

  var boxW = 0;
  $inBox.children().each(function(i){
  $col = $inBox.children().eq(i);
  $col.width(options.width + “px”);
  if(i==0){
  $col.addClass(“first”);
  }else if(i==$inBox.children().length-1){
  $col.addClass(“last”);
  }else{
  $col.removeClass(“first”);
  $col.removeClass(“last”);
  }
  boxW += $col.outerWidth(true);
  });
  $inBox.width(boxW);

• 205 Automatisch kolommen verkrijgen | Van Oosten Media's blog // Jul 14, 2010 at 8:42 am

  [...] je nodes automatisch omgezet worden naar nodes met kolommen? Hier is een jQuery-plugin te vinden: Columnizer. Nog geen idee of het werkt in IE. Zie ook hier. This entry was posted in Jquery, Kolommen, [...]

• 206 Jonathan Schofield // Jul 15, 2010 at 3:08 am

  Adam, do you have an answer to my query about CSS3 multi-column support handling please?

• 207 IE i JavaScript, czyli IE Hacks no. 2 | WK Handcoding // Jul 17, 2010 at 3:30 pm

  [...] przeglądarce IE za pomocą jQuery oraz wtyczki do niego – Columnizer. Wtyczkę ściągamy z tej strony i zamieszczamy ją w sekcji head naszej strony. Niezapomnijmy także o zamieszczeniu [...]

• 208 Robert // Jul 18, 2010 at 1:22 am

  Hi!

  Adam, thanks for your sharing your good work on this plugin.

  I just tried to put it on my site but ran into problems with IE. While Firefox displays the columns fine, with IE8 my content simply disappears. It does not report any Javascript errors either.

  Anybody, any advice on how to approach this issue?

  Thanks and regards, Robert

• 209 Robert // Jul 18, 2010 at 1:48 am

  PS: I have uploaded the page here:

  http://www.the-ninth.com/demo/column_demo.htm

• 210 Merlyn // Jul 27, 2010 at 1:49 pm

  HI Robert,

  Your page is rendering in”Quirks Mode” which makes the columns disappear in IE 6. 7 & 8.

  “Quirks Mode” is kicking in because your are in instead of which they should be according to your Doctype which says you are using HTML 4.

• 211 Merlyn // Jul 27, 2010 at 1:57 pm

  Hi Robert,

  “quirks mode” is kicking in because your tags are in CAPITALS instrad of lowercase, which they should be according to your Doctype which is HTML 4 transitional.

• 212 3Pinter // Jul 28, 2010 at 3:36 am

  adding class ‘dontend’ doesn’t work! Even on your own site: have a look at example 7. Third heading doesn’t break.

  How to solve this??

• 213 3Pinter // Jul 28, 2010 at 3:40 am

  Sorry didn’t read properly… I thought it was: doend.
  But that’s on the wish list. (I needed my h2 headings to start at a new column..)

• 214 Robert // Jul 28, 2010 at 5:46 am

  Hi Meryln,

  Thanks for your response, I got it working now.

  See you, Robert

• 215 STB // Aug 11, 2010 at 2:20 pm

  Hm, it’s really great idea with two columns…

• 216 Jeremy // Aug 28, 2010 at 9:41 pm

  First of all, this has generally been awesome. I use it quite a bit for different projects and I have just run into my first issue. The data appears columnized initially. I’m using an ajax update panel. When I click on the link button below, it calls the function and shows the form as it should, but the columnized data goes back to being a single column.

  To explain, I have have the following generalized html layout:

  Please advise… Thank you.

Leave a Comment or