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!
Has Columnizer helped you build your website? Send me a coffee and become a sponsor on Github! Thanks for your support! ☕️ 🙌
Get the source
Available on Github at https://github.com/adamwulf/Columnizer-jQuery-Plugin.
Stable Version: 1.6.0
Quick Start
To use columnizer, just call the columnize() function on your jQuery selection, and that’s it!
$('#mydiv').columnize();
$('#myotherdiv').columnize({ width: 200 });
$('#mythirddiv').columnize({ columns: 2 });
Release Candidate New Features!
- Now you can manually specify line breaks for some or all of your columns!
- Set the new `manualBreaks` option to true to use only manual breaks without any auto-columnizing (false by default).
- Any node that has the CSS class `columnbreak` will act as a column break for that column.
- Optionally prefix all of the CSS classes used by Columnizer to avoid conflicts with your other styles. Use the new `cssClassPrefix` to define the class prefix.
Stable Version New Features
- Added jQuery 1.6 support
- Fixed an infinite loop in a rare edge case if lastNeverTallest option was set and the content forced the last column to be tallest with dontsplit CSS class
- Fixed an IE crash if “px” was included in the width option
- renamed float option to columnFloat since float is a reserved word
- accuracy (optional) tells columnizer the number of characters to look before splitting between words. smaller is more accurate for column breaks.
- Fixed columnizer removing text nodes if they are immediate children of the columnized node
- Removed hard-coded 3px padding. Columnizer now exactly estimates column widths instead of slightly underestimating widths and adding padding. This change may affect your CSS layout. See comment and explaination here.
- Updated sample files
Stable Release Bug Fixes
- Columnizer is now backwards compatible with older versions of jQuery
- Fixed `lastNeverTallest` sometimes leaving a tall last column
- Added a class to nodes that are split between columns. This helps you style 2nd half of paragraphs to not have leading first line space.
- Non-visible text nodes will never end a column. This helps fix strangeness with dontend nodes still ending a column.
- Fixed infinite loop with text that includes double spaces.
Demos
- Sample 1: Simple text only columns. Text overflows from the top columns to the bottom columns.
- Sample 2: Text, images, and quotes being columnized. Also shows the use of the “dontend” class and lastNeverTallest option.
- 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. Also shows how javascript event handlers are preserved for content that is columnized.
- Sample 5: Shows fixed width and height columns scrolling horizontally
- Sample 6: Uses the target option to prevent the content flicker between page load and columnizing.
- Sample 7: Shows the use of the “dontend class
- Sample 10: Layout a newsletter over multiple 2 column pages. Check this post for the motivation and explanation.
Documentation
Documentation is available on the Github repository’s wiki.
Helpful Hints
- Any node that has the CSS class “dontsplit” won’t be split into multiple columns. This is handy to make sure that tables, etc, aren’t chopped in half if they land at the bottom of a column.
- Any node that has the CSS class “dontend” will never be put at the end of a column
- Any node that has the CSS class “removeiffirst” will be removed from the content if it is the first node in a column.
- You can specify a rough width your columns, and Columnizer will create as many as will fit in the browser window. Just use: $(‘selector’).columnize({width: 400 }) syntax
- You can specify a specific number of columns, and Columnizer will distribute your content between that many columns. Just use: $(‘selector’).columnize({columns: 2 }) syntax
- When using the width and height options to scroll horizontally, make sure that the .column CSS class does not specify any padding or margin or border. See CSS for sample 5 for an example on how to create buffer between columns.
License
Columnizer by Adam Wulf is licensed under a Creative Commons Attribution 3.0 United States License.
Support the Project
Has Columnizer saved you an hour of development time? Support Columnizer and become a sponsor on Github! 🙌
Reporting Issues
For feature requests or bug reports, please file an issue at the 
Columnizer GitHub page.
Comments are closed. If you have feedback, please reach out at 
adamwulf.
so… this looks promising… when can IE stability be expected… (it’s 86% of the visitors to my site)
hopefully only by the end of the weekend, there’s not too much left to do.
Great… I think this is a grand idea (I’m sure we all have been wanting this) Keep up that good work there…
this is pimpin… nice work… end weekend…lol 😉
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
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… 🙂
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
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
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
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
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
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.
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.
@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.
This looks really nice. Trying to download, the link just leads me back to Adam’s blog. Am I missing something?
@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. 🙂
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
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?
@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.
Als0–
I added sample 4 that does exactly that.
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.
wow, thanks for the super speedy update! That works great.
Agree on the TinyMCE idea 🙂
On FF & Safari second column is always longer with more content. Any Ideas?
@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
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.
Yes, I have the exact same problem in IE6 with lightbox, a fix would be appreaciated.
@jh @marian,
definitely a priority on my list – i’ll try and get this out in the next release
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 !!!
@MC
thanks for the tip! I’ll add that change into the next release.
Cheers!
hi, the zip download isnt working, i get 404 error, why?
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.
@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. 😛
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.
@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!
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.
@jenny-fa
You can use the “dontsplit” class to ensure an element is not split between two columns.
$('li').addClass("dontsplit");
🙂
That really should be done automatically, though. >.<
Anyway, thanks.
@Adam
Hey! This is perfect! Many thanks Adam,
greetings from all Merix team members ;),
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.
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.
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.
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
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..
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!
@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
This jquery plugin is really a big time saver especially. Please keep it up :).
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
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
Oh, thx for the really quick answer!
thx for the tip also. ill see what i can do… 🙂
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! 🙂
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
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! 🙂
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!
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! 🙂
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.
Steve, can you post a URL / email me the URL of the broken page?
i’m still testing it out on my localhost. will send what i have (code) when i’m at my home machine.
Can’t Wait for the “Break Column” Parameter on a future version! Looking forward to your Plug-In! Congratulations on this one… 🙂
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.
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
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!!
@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
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
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.
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
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.
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
hi MC, Brilliant – it’s working now. Cheers for the rapid help. Again – good work and thanks very much. Best,
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!
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
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!
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
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!
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
@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://adamwulf.me/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
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
Hi!. It seems that your plugin doesn’t work with jquery 1.3.1
Can you take a look at this?
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.
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.
@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
ps: to try at home, here’s the zipped folder with the archives:
http://primeclub.org/stuff/columns/columns.zip
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.
@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
@Gerry
Just upated the page w/ Creative Commons license.
Cheers
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…
That’s ‘br’ tags that are causing the disappearing
@Wulf
Just figured why I can’t use the overflow. The height needs to be dynamic…
Can I not use ‘dontsplit’ on span tags?
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?
@James
it should work fine for any width of content. URL?
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.
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
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?
Ah, I’ve got the adding margin part!
Great script!
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.
Has anyone implemented this using TinyMCE? I am having problems with content not getting columnized when it should, maybe related to tall images?
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.
@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
@Adam
Gotcha. I’m looking forward to the workaround! Thank you very much for your time.
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?
@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.
@Daniel
Nice. Indeed, this works 🙂 Thanks a lot!
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.
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.
upps, couldn’t even type the name right
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!
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!
@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
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.
how can i download this code ?
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;
Oops, I meant
if (this.children().length <= 1) return;
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
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 😉
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).
When I say crashes, I mean it goes into an infinite loop – sorry!
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
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
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.
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!
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.
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 )
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?
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.
Many thanks, Nathan. That fixed it for me.
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?
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,
very nice
thanks
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
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!
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!
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
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!
Awesome stuff! Any repository for this? Join Github! 😛
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.
Hm, it seems this plugin is incompatible with jquery 1.4.x.
@Tom,
Check out http://adamwulf.me/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/
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!
Hi Adam.
Please help! How to make three columns by 33%
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
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.
thanx good code
Wow, this is terrific! thank you so much!!!! true typography is coming to the web!! great great great!
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…
Well thanks for the code..!
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.
Thanks for the plugin
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!
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.
thank you for that plugin and the excellent documentation. awesome!
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!
Thanks Adam, this is really usefull. Good work!
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 =)
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!
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
});
});
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!
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?
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?
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?
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!
“I plan on adding the ability to forcefully break a column”
Awesome! That’s what I’m looking for.
nice plugin
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.
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.
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
Hi! I have made a polish tutorial of columnizer plugin! You can find it at my site.
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
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?
It would be nice to be able to specify a “gap” for the columns… just like CSS3
@Raul Riera: to get a gap between columns, I use the following:
$(‘.column:not(.first)’).css(‘margin-left’, ’10px’);
@Matt.
Thanks 🙂 that saved me
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 :<
[code]
long-text-here
long-text-here
[/code]
and code here ^^
http://img20.imageshack.us/f/65365377.png/
hope this will help u understand what i want achieve
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
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.
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
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…
This would be very helpful to my client’s website.
Thanks for sharing.
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?
On another note, did you know your Notes and Commentary page isn’t working? Something up with your staging server.
On another note, did you know that there is something up with your staging server which your Notes & Commentary link goes to?… http://page2.adamwulf.me/
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.
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.
🙁
Sorry for the confusion re: links + demos. everything should be back up now 🙂
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!
@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.
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);
Adam, do you have an answer to my query about CSS3 multi-column support handling please?
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
PS: I have uploaded the page here:
http://www.the-ninth.com/demo/column_demo.htm
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.
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.
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??
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..)
Hi Meryln,
Thanks for your response, I got it working now.
See you, Robert
Hm, it’s really great idea with two columns…
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.
Hello,
The script is working fine, but I am experiencing problems when a JavaScript Minifier tries to minify the script. I am using Liferay Portal 5.2.3, that has a Minifier class. This uses a custom rhino.jar and yuicompressor.jar that comes with the portal. The Minifier throws syntax errors and fails to minify the autocolumn script.
09:16:24,934 ERROR [MinifierUtil:121] 2: 180: invalid property id
09:16:24,935 ERROR [MinifierUtil:121] 16: 181: missing name after . operator
09:16:24,936 ERROR [MinifierUtil:121] 24: 221: missing name after . operator
09:16:24,937 ERROR [MinifierUtil:121] 26: 285: missing name after . operator
09:16:24,938 ERROR [MinifierUtil:121] 27: 246: missing name after . operator
09:16:24,940 ERROR [MinifierUtil:121] 1: 0: Compilation produced 5 syntax errors.
Autocolumn works fine, but the minifier error sometimes affects the performance.
Any ideas on these syntax errors?
BTW I can see them in my web-editor, Aptana.
Thanks.
Hello again,
I’ve found out what the problem was:
– the ‘invalid property id’ was the ‘float’ from the default properties.
I changed the name of the property from ‘float’ to ‘xfloat’ everywhere where it was used. That resolved all the problems and the minifier from Liferay Portal works fine.
Cheers,
Thanks for the great plugin!
Hello
thats a very nice plugin. it works fine if i don’t set display to none. but how can i make it work with this property? i need it to columnize dynamic data from the database and then show the columns in a popup div with left-right animated scroll.
thank you for your help and such a gr8 plugin.
Awesome plugin Wulf, I think i’m really close to getting this to fit my needs:)
I’ve got a really bizarre bug that i was hoping you might be a able to look at.
I have been troubleshooting this and have noticed that the ‘last column’ div ends up emtpy and adds all this blank space on the right side.
ie:
Just for kicks i took out the
tag at the top of my file and it works !!
this is strange, no? Obviously, i need to keep the tag there, but
can i send you the html that i am working with or just post it here?
Thanks!
sorry my post got cut, it was the DOCTYPE tag that i took out.
Great ! thank you very much for sharing and help to web developers that are in the beginnings
Hi there, great plugin and something I’ve been after for a while. One thing though, I seem to have an issue on FF Mac, when I add a font-size to the css it breaks the columniser and it just is one long list.
Just wondering if anyone has experience of this?
Cheers
There is a bad bug in the script which is multiple time mentioned above.
I you select “lastNeverTallest” and you only have one item with the class “dontsplit” f.ex. one li element, you run into an infinite loop an the browser crashes because of this line of code:
if(options.lastNeverTallest && lastIsMax){
// the last column is the tallest
// so allow columns to be taller
// and retry
targetHeight = targetHeight + 30;
if(loopCount == maxLoops-1) maxLoops++;
}
maxLoops will grow to infinite.. And the single item will be in the last column.
I cannot emphasize how great this plug in is! This is awesome! Wow!
Thanks Wulf for a great plug in. We took it and ran with it for a new site we are designing, at http://www.thinkingarizona.com. We used columnizer as well as jQuery CarouselLite (or our version of it) to make a block that had columns as well as scrollable panes. Check it out… read any of the main stories to see it in action.
The one bug we saw was not really the plugin, but the different ways browsers render text (character width) and line-height. The inline photos move around a bit depending on what browser you use. But oh well, CSS3 columns would have the same problems. The “dontend” classes were very helpful in making sure headers aren’t all by themselves.
Thanks for a great plug in.
@Nate
I’ve got almost the same problem! For some reason I end up with one column “first last column” and the content isn’t split correctly.
When I remove the CSS files and reload the page, the content is split properly.
I can’t realy figure out what is causing it!!!
Anyone an idear?
Cheers an happy coding
Awesome, This is a lifesaver. I shall be using this on many of my projects from now on.
Can’t wait for the column break feature!
This is a great feature. We are currently implementing this on our new website. A great alternative to the CSS3 solution.
1. Thanks for the nice plug!
2. I have hard problems: The columns are too high:
http://magazin.laborplatz.ch/fahrfreude/ruch—wie-er-lenkt-und-denkt-_1_/seite_1-2
I tried with the argument “overflow” and I also tried also to fix it with CSS.
But I couldn’t solve the problem. I am looking for help.
I have the same issue as Will (post 135).
The Div which I would like to columnize is inside anothe div with display:none initially.
The content is not there until I resize the screen, then columize works fine.
I have tried to use
$(‘div#ao-list’).livequery(function(){
$(this).columnize({});
});
This makes my content appear, but only in 1 column.
http://pastie.org/1319281
Does anyone have a suggestion?
Thanks for the plugin. I used it as a fall-back for browsers that don’t support the CSS3 column-count property. I experienced one small problem that can easily be fixed: when a numbered list is split over two columns, the numbering will restart at 1. To fix this behaviour I added the following code to the split()-method:
if($putInHere.get(0).nodeName == ‘OL’) {
$pullOutHere.attr(‘start’,$putInHere.children().length+1);
}
Of course, this will only help as long as the numbering started at 1 to begin with, and as long as the list items are spread over not more than two columns.
As for the people having problems with display: none. You could append the node to a 0x0-pixel div with overflow:hidden. This way you won’t see the node, but it will have dimension that can be used to do calculations.
“# Maybe I’ll also add a feature for “if you’re about to break column, please break here…..”
Love this plugin! A column-break marker feature would be awesome. I have nested lists that I need to columnize, and would like to be able to define dontsplit on the children of the elements which form the headers.
P.S. Where’s the link to click to send you donations via PayPal??? Some of us would, you know.
somehow the content isnt spliting, $(‘.col’).columnize();
the result produces one coloumn that is halved width, and the other half is blank, contents isnt going in. no matter how high is the first column, contents just dont distribute to the other column.
Heads up to everyone that the code is now [finally] on github: https://github.com/adamwulf/Columnizer-jQuery-Plugin
patches/pull requests welcome!
Hi!
How, can i do invizible the div, which i columnize before columnize will be done.
I try:
css: div.columns {display: none;}
js: $(function () {$(‘div.columns’).columnize(‘{width:300, doneFunc : function(){
$(‘div.columns).show(‘fast’);
}’);});
but it not work. Why? Whaaaaa-ay? thx
@Cozmi
change div.columns {display: none;}
to
div.columns {visibility: hidden;}
I love this plugin, but it’s giving me some issues.
I’m trying to float two columnized divs next to each other for a horizontally designed page, but no matter what I try, the second div is always positioned below the first one!
Any insights would be greatly appreciated!
It seems adding a display: inline-block; to the div that is to be columnized will make it disappear. I need both divs to be lined up next to each other.
Anyone care to venture an explanation?
In example 5, if you change the code from:
$(‘.wide’).columnize({
width : 300,
height : 400
});
to
$(‘.wide’).columnize({
width : 300,
height : 200
});
Firefox 3.6 crashes (apparently infinite loop).
Hello from Russia! Should it be effortless for me to pages and use a submit in your weblog using the link to you? I’ve tried emailing you regarding this problem even so it appears i cant achieve you, please response as soon as have a moment, thanks.
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
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
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
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>
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
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.
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…
Very cool code, I’m going to put it to use immediately!
Hello and thx for this great plugin that i use http://www.simpleartmag.com .
It is great but it seems that this script doesn’t work when i replace by .
i’m right ?
I’m using columnizer in Joomla articles (nice plugin!). The editor is super slow to respond to commands and takes forever (minutes) to save changes…when columnizer is embeded in the article. why might this be and how do I correct it? (I’m new to all of this stuff, so please be gentle)
Hi Adam, I’m trying to implement this on a horizontal scrolling site. The problem I’m having is getting my copy to stop, then start a new column, so a visitor doesn’t have to scroll both horizontally and vertically. I’m sure it’s a simple fix, but I’m new to coding. Any advice? Thanks.
url: http://janenagle.com/jimmy 3.html
Hi Adam,
I am just beginner with jQuery. I started working on my school project and I used columnizer but I found out some conflict. I am using page splitted into hidden divs and if I use columnizer the content of second div which have to be splitted into columns remains hidden. You can see it here:
http://slovakia.evo-host.net/places.html . Just try to toggle to Cities and Towns. Do you have any idea how to fix it? Thanks
If I use this plugin nothing except “br” tags are displayed. What is the problem?
Thanks!
If the content has no HTML tags, the splitting does not work…
Columnizer is ignorant of the width option you may set to force your resulting columns width, according to docs: “a rough width your columns, and Columnizer will create as many as will fit in the browser window” – you always will get 48% in case of two columns for example. Not to mention that you do need exact width to allow other CSS styling like padding and margin for each column. Basically this thread suggests direct hack in a couple of messages, which you likely will forget next time when download this great plugin. So, just force the width you need with jQuery like this, right after “columnizing” via provided callback:
…
doneFunc: function() {
jQuery(‘.column’).width(‘100px’);
}
…
And, of course this approach will be fully compatible with native CSS3 if you use columnizer merely to support MSIE missed feature, which is a good idea – you will need only one extra class to define generated “.column”.
Perfect, just what I was looking for, thanks Adam.
Wonderful plugin. I have a slight issue. I am loading it intoa popup div. The content is hidden as it loads. But if i right click in chrome and select ‘inspect element’ The text appears, fully columnized. What’s going on here?
I have just discovered that with my content being hidden, it also appears if i adjust my page dimensions by dragging my browser, how do i solve this?
Sorry to keep posting, but I realise my problem is the same as “239” and “135”
“The Div which I would like to columnize is inside anothe div with display:none initially.”
What can I do to get around this?
Really great work, but I think you should post a link to info about the CSS3 that will eliminate the need for this:
http://www.quirksmode.org/css/multicolumn.html
It’s just that I spent a lot of time trying to get columnizer to work before I realized there was a new alternative
@Keith
No, it’s not completely replaced with CSS3 – you have to consider all MSIE versions, including IE9 which will NOT support CSS driven columnizing.
Thanks for the very nice plugin! Hopefully you could add that force column option soon, i am now considering using multiple textareas to manually create columns :S
I’ve created a very basic solution for the force column problem:
doneFunc : function(){
var oldHtml = $(‘#container’).html();
newHTML = oldHtml.replace(‘[break]’,”);
$(‘#container’).html(newHtml);
}
This works if you have standard width columns. If you have percentage columns you should iterate through the columns and set a new width for them also.
Hope this helps!
The replace functions 2nd argument should be:
hm.. it gets stripped, well just put the paragraph and div closing tag and new openingtags..
Great plugin!
Is there a way to re-initialize or columnize the selected element without it making smaller columns? I am using the script to display content with the ability to hide and show certain sub elements, but when some of the content is hidden a blank area is left behind. How can I re-initialize columnizer so it fills in the blank space with the desired content?
Thanks!
Thanks for such great plugin that saves time for everyone. 🙂
However it seems it doesn’t compatible with jQuery 1.6 or above… Is there any workaround to fix it?
Thx!!
I am trying to initialize a toggle script to shrink and grow content within the columnizer. Thie jquery i have written is as follows.
$(function(){
$(‘.dmainheader’).addClass(‘dontend’);
$(‘.dadvert’).addClass(‘dontsplit’);
$(‘.wide’).columnize({width : 246, height:600});
$(‘#tester’).click(function(){
$(‘.test’).toggle();
// remove all parent make by your jquery columnizer
$(‘.column > *’).unwrap();
// re-initialize jQuery columnizer with 2 column
$(‘.dmainheader’).addClass(‘dontend’);
$(‘.dadvert’).addClass(‘dontsplit’);
$(‘.wide’).columnize({ width: 246, height:600 });
});
});
This will hide and show divs within the columnizer but the height does not stay to 600px instead it jumps all over the place.
Any help greatly appreciated?
Thank you so much for this nice little plugin! It works perfect for me in multi-column JavaScript menus with unordered lists.
Hi Adam,
Your plugin is a very good work!
I have one question: I display list on my website which have various sizes, from one object to thirty (or more). I ask for three columns, and when I have few objects (one, but also 4-5), they are all put in the last column, whereas the first and the middle are not filled (or almost not).
I have the same problem when I specify a width: the plugin creates at least three columns…
Do you have any solution?
Best regards.
Thanks for this great plugin. However, I was struggling for quite a bit to give the columns more space to breathe. The way I fixed is, was by overriding the CSS for .column class in the doneFunc parameter:
// example for nicely spaced 2-columnview in a 800px wide div:
$(“div.twoColumns”).columnize({
columns: 2,
buildOnce: true, // important!!!
lastNeverTallest: true,
doneFunc: function() {
$(“div.column”).css(“width”, “375px”);
$(“div.column”).css(“margin-right”, “25px”);
}});
Hi,
I congratulated you about this work. It’s very useful for me. But it doesn’t work with jQuery 1.6. Would you please check it.
Best regards.
Hi,
It’s a great plugin. I congratulate you for this effort.
But It doesn’t work with jQuery 1.6.1 and last page button display below navigation bar at IE9 and IE6 in every situation.
I wait solution for these problems.
Thanks for everything.
Best regards.
Thx for all !!!!!!!!
Your plugin kicks ass and it saved my life because this fuckin’ shit of Internet Explorer doesn’t support CSS3
I came across the same issue with YUI Compressor as Dominic above — float being a restricted keyword causes syntax errors during compression (yuicompressor-2.4.4.jar).
hi! i am just try to paging my big content, hop its more helpful for me. thanks a lot
@Eric
Change line 155 from:
if($clone.attr("nodeType") == 1 && !$clone.hasClass("dontend")){to:
if($clone.prop("nodeType") == 1 && !$clone.hasClass("dontend")){@M@aster
Thank you so much for the solution!! It works beautifully!! THANK YOU!!
To make this work with jquery 1.6, change line 155 from “if($clone.attr(“nodeType”) == 1 && !$clone.hasClass(“dontend”)){” to ” if($clone[0].nodeType == 1 && !$clone.hasClass(“dontend”)){ ”
This probably has to be done elsewhere too, but for the features I’m using, this was sufficient.
Really great plugin, but don’t work with jQuery 1.6+ 🙂
I’m trying to make a standard Newspaper layout so I’m using Text-indents at the start of each paragraph.
eg.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce volutpat lobortis urna
iaculis tincidunt. Proin vulputate elementum
lectus a ullamcorper. Aenean in neque ultrices
justo sagittis malesuada.
When the program splits this across two columns I get.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce volutpat lobortis urna
iaculis tincidunt. Proin vulputate elementum
lectus a ullamcorper. Aenean in neque ultrices
justo sagittis malesuada.
instead of
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce volutpat lobortis urna
iaculis tincidunt. Proin vulputate elementum
lectus a ullamcorper. Aenean in neque ultrices
justo sagittis malesuada.
Because ofc it is a new paragraph tag at the start of the new column. Is there anyway to easily add a class to the first element in a column if it is the 2nd part of a split so I could pick it up with CSS and remove the indent.
Ag sorry that didn’t format properly when it went onto the board so all the examples were messed up….. 2nd attempt.
I’m trying to make a standard Newspaper layout so I’m using Text-indents at the start of each paragraph.
eg.
—–> Lorem ipsum dolor sit amet, consectetur
> adipiscing elit. Fusce volutpat lobortis urna
> iaculis tincidunt. Proin vulputate elementum
> lectus a ullamcorper. Aenean in neque ultrices
> justo sagittis malesuada.
When the program splits this across two columns I get.
—–> Lorem ipsum dolor sit amet, consectetur
> adipiscing elit. Fusce volutpat lobortis urna
—Column Split —
—–> iaculis tincidunt. Proin vulputate elementum
> lectus a ullamcorper. Aenean in neque ultrices
> justo sagittis malesuada.
instead of
—–> Lorem ipsum dolor sit amet, consectetur
> adipiscing elit. Fusce volutpat lobortis urna
—Column Split —
> iaculis tincidunt. Proin vulputate elementum
> lectus a ullamcorper. Aenean in neque ultrices
justo sagittis malesuada.
Because ofc it is a new paragraph tag at the start of the new column. Is there anyway to easily add a class to the first element in a column if it is the 2nd part of a split so I could pick it up with CSS and remove the indent.
Hi This script is perfect, but I need the columns to break at some point instead of being all the same.
Example: Father, Son, Son, Son. Father Son Son. Father Son Son Son Son
What I needed was the script whenever you leave the columns is the father
Nice script, but is it possible to set the height to 100%? When i try to apply it the whole computer freezes and the only thing that’s a hundred percent is my CPU regardless the browser i’m testing on..
Hi!
Your plugin is excelent, but I got some issue. Can you please check my post on stackoverflow: http://stackoverflow.com/questions/2211810/jquery-columnizer-plugin-only-working-correctly-on-window-resize
Thanks.
Hi Adam.
I’m using your latest commit 1.5.0 and I have the need to add space between columns. I use a trick with the commit 1.4.0 in the css using .column { padding-right:15px } but now, it doesn’t work as correctly. How can do it???
Thanks.
Josep.
The older release used to add a 3px padding and slightly under estimate column widths. the newest release doesn’t add any additional styles to your columns and exactly estimates column widths, but this means any CSS on the .column may result in columns breaking to the next line.
instead of putting styles on the .column, put the padding on the objects inside the column. I’ve just added a new sample13.html that shows how to add padding to columns.
https://github.com/adamwulf/Columnizer-jQuery-Plugin/commit/6fa9ce44df52a6e6ef9d407bb20b3374b616b0d4
That new sample file is inthe master branch, but not the 1.5.0 download yet
Hi Adam.
Thanks for your quick response. I revised the css to modify the “.column { padding-right:15px }” by “.column > * { margin-right:15px; }” and return to render the results correctly.
Josep.
I found some kind of problem about the lastNeverTallest property . In this page: goo.gl/m1H7W when I change to another sub-menu the following areas loose this lastNeverTall propertie.
Anyone knows why??
Thanks
Hi Adam any idea why it is not working in IE. It works perfer on all other browsers.
Im getting a error message on
$(‘#middle-nav’).columnize({columns:2});
saying
Message: Object doesn’t support this property or method
Can you or anyone help please??
am i doing something wrong? when i try to install this plugin via the wordpress zip uploader, it uploads fine… but when i try to activate it i get the message “this plugin has an invalid header”. and the plugin does not get activated. i cant even see it listed in my listed of installed plugins. HELP!!!!
For some reason, this plugin removes all text from my div. Anyone know why that happens? It does create columns, but all my text dissapears and only some tags remain.
Hi Adam, I’m trying to implement this on a horizontally scrolling blog. Whenever I insert an image, however, the columns become taller than I set them in the header, causing vertical scrollbars to appear. Basically, the image should be in a column of its own, rather than wrapped with text.
http://thesoundofspiders.net/ziv/pages/test.html
Any help is greatly appreciated! Thanks for making this freely available.
Is it possible to columnize the content of an absolute positioned div. If so how?
For some reason the div always disappears…
Fantastic plug-in!
I’m having a problem using columnizer in a page that is being dynamically generated. My output looks perfect, but only after the page is resized.
Looking through the code, it looks like it’s setting up a callback to the columnizeIt function on window resize. Is there any way to call the columnizeIt directly? I’d like to call it from another JQuery plug-in I’m using after it gets done doing its thing. I admit I am a novice at JQuery coding.
i wanted to use this plugin with the latest version of jQuery (v1.6.4) but the plugin breaks. is there a solution for this issue?
Great plug-in – well done.
I have 2 issues:
i) it only seems to work with older versions of jQuery – not 1.6.x
ii) I need a space (say 20px) between columns and cannot see how to control this. I expect I am being dumb, as your documentation says “See CSS for sample 5 for an example on how to create buffer between columns.” but sample 5 seems to be the same as all the others.
Many thanks
Really looking forward to the ability to force break a column. Will you be making an announcement when this feature is added?
Thanks.
Has anyone had this error before?
$clone.prop is not a function
Thanks for your work on this!
-Al
“Thanks!
If the content has no HTML tags, the splitting does not work…”
I’m getting the same thing, did you ever find a solution or is thing long past being workable?
I’m trying to get round a problem with this. I’ve got dynamic content loading in on my asp.net page. when i try to run columnizer the page hangs because the content isn’t on page at the point the script runs. any ideas?
Susan,
I am loading this after the page is loaded and still get this error. If I use a different jquery function and call the same class it works.
So still not sure. I ended up using jquery.column plugin http://plugins.jquery.com/project/jquerycolumn for now though columnizer had more of the control I needed.
“I plan on adding the ability to forcefully break a column – similar to Microsoft Word’s “Insert Column Break” feature.”
Is there any progress on this feature? It would really be great!
Awesome plugin, tks 😉
How do I vary the length of each column and float one left and one right? I’m trying to maintain the column width and layout that I’ve got on other pages.
I’ve been using this plug-in for a while now with my WordPress site and I wanted to say thanks for making it so easy to implement Columnizer into themes. Unlike Masonry, which I was originally using but caused me nothing but headaches, your plug-in loads fast and does what it says it will do. So again, thanks for making this available to the community.
Love to try it but download page is gone.
Found it! Thanks.
I gotta hand it to you Wulf, this is a very powerful, very easy to use, very versatile plugin.
I had a problem I was gonna post about, but I downloaded the latest version of the plugin and it was solved. So its all about how great this is.
Thank you,
Cheers!
Man I can’t wait to see if I can get this >
http://adamwulf.me/
Layout to work with my cartoon display like it does on the Bootstrap by Twitter here > http://www.tted.com/ or likje I have it working with some other jquuery code I picked up and am tinkering with here > http://wacico.com/
Is it OK to nick off with that first link layout to see if I can get my cartoon strips to display like my links using that Adam? – replacing that top across the page image with my cartoon strip I mean. Well giving it go to see if I can get it working as this looks very interesting very interesting indeed!
hi! i just downloaded the columnizer and i would like to run sample 9 on my blog but i am bit lost, as i am not that familiar with php and wordpress org. been using wordpress.com until yesterday! I was wondering if u could help me out here, telling me how i can make the jquery code work? where should i put it and how? And how do i make it work? what do i have to change? thank u in advance!!!!!
Hello Adam Wulf,
I encounter an issue while using your script with Firefox 9 and Epiphany (webkit).
It happens when ‘something’ is wrong with the style of the div that will be columnized and I was unable to find out what.
The bug: The script enter in an infini loop and force the browser to abort.
I think, however is my css, it must never loop like this. So I fix the code with an ugly workaround but I’m sure there is an explanation somewhere.
This is what I done, I hope you will recognize your parts:
var i=0;
/* FIX */var preventLoop;
while(i<numCols-(options.overflow?0:1)||scrollHorizontally&&$destroyable.contents().length&&preventLoop!=$destroyable.contents().length){preventLoop=$destroyable.contents().length; …../* end */
And just after the loop:
/* FIX */if($destroyable.contents().length==1){$inBox.children(':last').remove();$inBox.children(':last').addClass('last').append($destroyable.contents());};
I understand this: the loop create columns until it encounter the problem. This problem makes it unable to add the very last content of $destroyable. It appears after breaking the loop that there is an empty column at the end even if the last column can be used.
Note: the content of the columnized div don't matter. The bug happen any time.
i am having success in splitting a div with checkboxes – however, the input box is being stripped from the first item in column 2 – any thoughts?
I couldn’t get the padding to work without running into the same problem Mark S had in his post on Jan 12, 2011, did anyone find a solution?
If we have a finite set of fixed-size columns, the last column could have an ellipsis “…” appended.
When overflow: hidden is used, the last text row is cut horizontally, which is ugly.
I think that your plugin could be adapted to handle this. I tried to be the source is too large for me.
Heya this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get advice from someone with experience. Any help would be enormously appreciated!
Hi
I add your script inside my tumblr. But there is a bug when there is a sidebar.
In fact my div to columnize have a 78% width. and it seems the plugin take as reference for the width the window size. Where must i change something ?
I solved the display: none problem with this dirty trick:
$(‘#mydiv’).css(‘visibility’, ‘hidden’)
$(‘#mydiv’).show()
$(‘#mydiv’).columnize({ columns: 4 })
$(‘#mydiv’).hide()
$(‘#mydiv’).css(‘visibility’, ‘visible’)
I switch to to from display none to visibility hidden and back to allow columnizer to get the correct sizes.
It is not so efficient but it could be inserted in the columnizer core to temporarily resolve this issue.
This script uses the prop function
typeof $.prop === ‘function’ is:
true when jQuery >= 1.6
false when jQuery 1.3
true when jQuery <= 1.3
Workaround: add this function to your code.
(function($){
if (typeof $.fn.prop !== 'function')
$.fn.prop = function(name, value){
if (typeof value === 'undefined') {
return this.attr(name);
} else {
return this.attr(name, value);
}
};
})(jQuery);
When i run sample8 example in IE7 & 8 .The image is not showing…..
Can anyone help me to solve this issue.Your help is greatly appreciated
Dear sir,
I am using the autocolumnizer.js for my websites need.Pls look at the following link .evenif i am using the “dontend” class for the job title “Drivers” , the node is displaying at the end of the first column.can you help me on this
Regards,
Shanavas
very Great plugin. Thank you Nathan, it fixed for me 🙂
Adam, using columnizer plugin, could you create a equal width & equal height vertical scroll pages ( like pdf or word). Please guide with a working sample.
Munawar, take a look at http://adamwulf.me/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/
Thanks for posting such a useful plugin! I’m trying to set my columns so that the width never changes, only the vertical flow changes depending on viewport height. As it works now, expanding the view port width causes the column widths to constantly alter slightly even when no new columns are created/needed. Thanks!
Works great for paragraphs but not so well on an ordered list as it kills the numbering. Would love to see this supported.
Thanks for the cool plugin but how ever it seems that newest version (1.5) in git repo has a bug in it so if anyone needs to use this plugin i recommend to use the 1.4 version but unfortunately its not available to download via given link at the top just go for one of the examples given and get the source using developer tools.
Hi
It’s there a method to re-initilize or destroy the columnizr.
What i want is change the number of columns on a responsive design.
For example on a tablet i want to display only one column and 2 columns on a desktop.
Hope anybody knows a workaround.
Great thing! For sure will be used on new startups, but one problem left – to modify module, so it can split content in paragraph to pages and columnize inside 🙂
#force breaking #force column
I did it !
spent quite a lot og time to figure it out, but it works fine !
just insert this code in the columinze function :
// define the code bloc you want to use as a page breaker
breaksign = ”;
if($putInHere.html().indexOf(breaksign)>0){
html = $putInHere.html();
pos1 = html.indexOf(breaksign);
pos2 = pos1+breaksign.length;
html1 = html.substr(0, pos1);
html2 = html.substr(pos2, html.length-pos2);
// keep the part before
$putInHere.html(html1);
// save the rest for later
$pullOutHere.prepend(html2);
// force the detection of the end od this page
$parentColumn.height(height);
}
you need to insert this code between :
if ($putInHere[0].childNodes.length == 0)
return;
and
var kids = $putInHere[0].childNodes;
you can set every possible string separator, just define it in the above code as the breaksign, and insert it wherever you want in the html you want to columnize.
magic !
I’m using this for a stimulating edition project :
http://liberezlesmachines.free.fr/blog/?cat=9
it’s still in progress, with such a big text content that it takes a while to process !
I’m gonna delete a lot of it, now that I managed to insert the page breakers…
great plugin !
The ({ height: }); option doesn’t work with jquery-1.7.2.min.js
It results in an unresponsive script.
Other than downgrading to older jquery version, what can I do?
Hello,
I have an problem with gaps between the columns.
I set the gaps with css:
.mothercolumn { width: 904px; height: 300px;}
.first.column { margin:0 8px 0 0; }
.column { margin: 0 8px; }
.last.column { margin: 0 0 0 8px; }
and the options for the plugin looks:
$(‘#wikitext div.mothercolumn’).columnize({
columns : 4
});
Now the plugin calculate the columns with an of 25%; but this could not work with gabs because the space for the 16px isn´t considered.
I will appreciate any help?
Best regards
Hi, love the plug-in… am struggling though with margins.
I’d like to have two columns, with a gutter between them so there is a clear space.
Has anyone managed this, and if so, how?
Thanks
Hi. I am having the problem that i only have one p-tag which i want to seperate in 2 columns. is this possible anyhow? Or do i always have to have at least two p-tags or others? Thank you in advance for your help.
nice thanks for the tip! I’ll add that change into the next release
For the life of me I cannot get this plugin to work. Can you tell me what I have missed here? I appreciate it.
dave
Is there a way to change the number of columns in a element dynamically, depending on the page width for instance?
Great plugin by the way. Thanks
Dave