So I needed a method to take a long, nested list and turning it into a compact, multiple acolumn list, for example, in order to display it as sort of a site map.
Being a huge fan of jQuery, it was naturally my go-to library of choice.
Scanning the plugins site, I can’t find a fair solution.
One of the caveats of many methodologies is that each list item has to be the same height. This works Ok for a lot of use cases, but what if your the source for the list contain arbitrary text you don’t control.
So, I started from scratch. Instead of relying on consistent line heights, and applying different margin settings to list elements, I decided to decompose the large source list into several smaller lists (one for each column) and then use a css float parameter to make them all appear side-by-side.
Features
- Styling of ordered/unordered lists
- Configurable column-count and width
- Easy restoring to “non-column” layout
- Requirements: JQuery 1.2 (download)
- Browser-Compatibility: Firefox 1.5+, IE6+, Safari 2, Opera 9+
Usage
Just apply to any group of DOM-elements gathered by the amazing JQuery-selectors. The provided arguments are optional (these are the default values).
$('ol').makeacolumnlists({cols:2,colWidth:0,equalHeight:false,startN:1});
Example
Columnize / Uncolumnize (equalHeight: ‘ol’)
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-
Cras vitae libero. Duis sed pede id erat laoreet varius.
-
Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-
Cras vitae libero. Duis sed pede id erat laoreet varius.
-
Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-
Cras vitae libero. Duis sed pede id erat laoreet varius.
-
Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc.
Sourcecode
/** # * Copyright (c) 2008 Pasyuk Sergey (www.codeasily.com) # * Licensed under the MIT License: # * http://www.opensource.org/licenses/mit-license.php # * # * Splits a <ul>/<ol>-list into equal-sized columns. # * # * Requirements: # * <ul> # * <li>"ul" or "ol" element must be styled with margin</li> # * </ul> # * # * @see http://www.codeasily.com/jquery/multi-column-list-with-jquery # */ jQuery.fn.makeacolumnlists = function(settings){ settings = jQuery.extend({ cols: 3, // set number of columns colWidth: 0, // set width for each column or leave 0 for auto width equalHeight: false, // can be false, 'ul', 'ol', 'li' startN: 1 // first number on your ordered list }, settings); if(jQuery('> li', this)) { this.each(function(y) { var y=jQuery('.li_container').size(), height = 0, maxHeight = 0, t = jQuery(this), classN = t.attr('class'), listsize = jQuery('> li', this).size(), percol = Math.ceil(listsize/settings.cols), contW = t.width(), bl = ( isNaN(parseInt(t.css('borderLeftWidth'),10)) ? 0 : parseInt(t.css('borderLeftWidth'),10) ), br = ( isNaN(parseInt(t.css('borderRightWidth'),10)) ? 0 : parseInt(t.css('borderRightWidth'),10) ), pl = parseInt(t.css('paddingLeft'),10), pr = parseInt(t.css('paddingRight'),10), ml = parseInt(t.css('marginLeft'),10), mr = parseInt(t.css('marginRight'),10), col_Width = Math.floor((contW - (settings.cols-1)*(bl+br+pl+pr+ml+mr))/settings.cols); if (settings.colWidth) { col_Width = settings.colWidth; } var colnum=1, percol2=percol; jQuery(this).addClass('li_cont1').wrap('<div id="li_container' + (++y) + '" class="li_container"></div>'); if (settings.equalHeight=='li') { jQuery('> li', this).each(function() { var e = jQuery(this); var border_top = ( isNaN(parseInt(e.css('borderTopWidth'),10)) ? 0 : parseInt(e.css('borderTopWidth'),10) ); var border_bottom = ( isNaN(parseInt(e.css('borderBottomWidth'),10)) ? 0 : parseInt(e.css('borderBottomWidth'),10) ); height = e.height() + parseInt(e.css('paddingTop'), 10) + parseInt(e.css('paddingBottom'), 10) + border_top + border_bottom; maxHeight = (height > maxHeight) ? height : maxHeight; }); } for (var i=0; i<=listsize; i++) { if(i>=percol2) { percol2+=percol; colnum++; } var eh = jQuery('> li:eq('+i+')',this); eh.addClass('li_col'+ colnum); if(jQuery(this).is('ol')){eh.attr('value', ''+(i+settings.startN))+'';} if (settings.equalHeight=='li') { var border_top = ( isNaN(parseInt(eh.css('borderTopWidth'),10)) ? 0 : parseInt(eh.css('borderTopWidth'),10) ); var border_bottom = ( isNaN(parseInt(eh.css('borderBottomWidth'),10)) ? 0 : parseInt(eh.css('borderBottomWidth'),10) ); mh = maxHeight - (parseInt(eh.css('paddingTop'), 10) + parseInt(eh.css('paddingBottom'), 10) + border_top + border_bottom ); eh.height(mh); } } jQuery(this).css({cssFloat:'left', width:''+col_Width+'px'}); for (colnum=2; colnum<=settings.cols; colnum++) { if(jQuery(this).is('ol')) { jQuery('li.li_col'+ colnum, this).appendTo('#li_container' + y).wrapAll('<ol class="li_cont'+colnum +' ' + classN + '" style="float:left; width: '+col_Width+'px;"></ol>'); } else { jQuery('li.li_col'+ colnum, this).appendTo('#li_container' + y).wrapAll('<ul class="li_cont'+colnum +' ' + classN + '" style="float:left; width: '+col_Width+'px;"></ul>'); } } if (settings.equalHeight=='ul' || settings.equalHeight=='ol') { for (colnum=1; colnum<=settings.cols; colnum++) { jQuery('#li_container'+ y +' .li_cont'+colnum).each(function() { var e = jQuery(this); var border_top = ( isNaN(parseInt(e.css('borderTopWidth'),10)) ? 0 : parseInt(e.css('borderTopWidth'),10) ); var border_bottom = ( isNaN(parseInt(e.css('borderBottomWidth'),10)) ? 0 : parseInt(e.css('borderBottomWidth'),10) ); height = e.height() + parseInt(e.css('paddingTop'), 10) + parseInt(e.css('paddingBottom'), 10) + border_top + border_bottom; maxHeight = (height > maxHeight) ? height : maxHeight; }); } for (colnum=1; colnum<=settings.cols; colnum++) { var eh = jQuery('#li_container'+ y +' .li_cont'+colnum); var border_top = ( isNaN(parseInt(eh.css('borderTopWidth'),10)) ? 0 : parseInt(eh.css('borderTopWidth'),10) ); var border_bottom = ( isNaN(parseInt(eh.css('borderBottomWidth'),10)) ? 0 : parseInt(eh.css('borderBottomWidth'),10) ); mh = maxHeight - (parseInt(eh.css('paddingTop'), 10) + parseInt(eh.css('paddingBottom'), 10) + border_top + border_bottom ); eh.height(mh); } } jQuery('#li_container' + y).append('<div style="clear:both; overflow:hidden; height:0px;"></div>'); }); } } jQuery.fn.uncolumnlists = function(){ jQuery('.li_cont1').each(function(i) { var onecolSize = jQuery('#li_container' + (++i) + ' .li_cont1 > li').size(); if(jQuery('#li_container' + i + ' .li_cont1').is('ul')) { jQuery('#li_container' + i + ' > ul > li').appendTo('#li_container' + i + ' ul:first'); for (var j=1; j<=onecolSize; j++) { jQuery('#li_container' + i + ' ul:first li').removeAttr('class').removeAttr('style'); } jQuery('#li_container' + i + ' ul:first').removeAttr('style').removeClass('li_cont1').insertBefore('#li_container' + i); } else { jQuery('#li_container' + i + ' > ol > li').appendTo('#li_container' + i + ' ol:first'); for (var j=1; j<=onecolSize; j++) { jQuery('#li_container' + i + ' ol:first li').removeAttr('class').removeAttr('style'); } jQuery('#li_container' + i + ' ol:first').removeAttr('style').removeClass('li_cont1').insertBefore('#li_container' + i); } jQuery('#li_container' + i).remove(); }); }
There are few parameters – cols, the number of columns to break the list into; colWidth set width for each column or leave 0 for auto width; equalHeight (defaulting to false) can be false, ‘ul’, ‘ol’, ‘li’ to set equal height for ul/ol or li elements; startN, the start number of numbered list.
I’ve tested with IE 6&7, FF3, Safari3 and Opera 9. The code could use a bit of refactoring perhaps for the purpose of beautification. View my demo file to see more samples or download
I’ve added this to the jQuery Plugin site.
Is it possible to have this separate child UL’s as well?
I have a list that has an integrated sub-list coming from a CMS.
It should break into three separate equal height columns, but the sub list doesn’t break apart, it stays directly under it’s parent.
It’s for a footer that will list all pages of the site, any ideas?
Thank you!
Thank you a lot for sharing.
Can each point/bullet from the left & the right column from each line be made aligned (while still being fluid)?
So that, like the example above, no.6 is aligned to no.1, no.7 to no.2, 8 to 3, and so on…
Brilliant little plugin – worked straight away. Thanks
Nice little bugger….worked great!
Fabulous! Thank you!
Great plugin. As usual, Firefox implements it without a problem, but there seems to be a bug in IE8 – doesn’t like the 0 colWidth setting for auto width. Putting a colWidth value in seems to fix it.
Great plugin! Just what I’ve been looking for.
Have you, or anyone, had any compatibility problems with IE7 and WordPress? I’m running WP 2.8.6, currently. Works fine IE8, but kills the all of the jQuery loaded on the site in IE7… Good times.
Thanks!
Jacob
This is nice! I’m brand new to jQuery, but I did write a php function to do this with an array of strings, but I’m really digging the ability to apply this “after the fact” with jquery.
Also, If you remove the px from col_Width, you can allow for more flexibility in constraints, like ’30%’, or ’5em’..
Thank you very much. very nice work! worked perfectly .. :)
If you’re having trouble getting list bullets to show in IE, I’ve found that playing with the left padding of the UL container helps…
Nick, thanks so much for posting this. I’ve spent hours trying to figure out why IE6+7 weren’t showing my list numbers for an . Thanks!!
[...] : http://codeasily.com/ Tags: JavaScript, li, list, menu, multi column, ul Share this [...]
Thanks for sharing this example. Great idea to sort lists.
[...] CSS3 Multi-Column Thriller CSS3 Multi-column layout module Smart Columns w/ CSS & jQuery CSS3 multi-column: pagina di test Multi-column layout: CSS3 Previews W3C Multi column CSS3 multiple columns A list apart: css3 multicolumn Equal Height Columns with jQuery http://www.codeasily.com/demo/few-column-list/few-column-list.html [...]
uhmm! really its great work..
Hmm… you seem to have even lifted some of his words from his post 3 months before yours:
http://christianyates.com/blog/mmm-geeky/multi-column-lists-jquery-alternative-method
You are the MAN !! thanks =)
[...] Multi Column List with jQuery“Instead of relying on consistent line heights, and applying different margin settings to list elements, I decided to decompose the large source list into several smaller lists (one for each column) and then use a CSS float parameter to make them all appear side-by-side.” [...]
[...] Si jQuery se está tomando la cotidianidad que tenía actionscript en mi día a día. La verdad que me sorprende lo rápido que se pueden lograr cosas. Ayer nombré como hacer un formulario totalmente usando jQuery en vez de HMTL. Hoy necesitaba hacer una pagina con varias columnas. Comunmente haria las divisiones corresponientes, les daria un ancho, un padding, magen y disrtribuiria el contenido entre ellas. El problema surge cuando el contenido es variable y nos es dificl distriburi el contenido de forma eficaz. Es por ésto que recurrí a jQuery, y sinceramente no tardé más de 3 minutos en implementarlo, estoy seguro que si lo hubiese hecho de la forma tracicional me hubiese llevado al menso 15 entre hacer el html y ajustar el css. Hay varios “plugins” que hacen esto que que usé yo y funcionó a la perfección pueden encontrarlo en: http://codeasily.com/jquery/multi-column-list-with-jquery [...]
Thank you for sharing this.
I am new to js, and I have problems making 4 columns instead of three.
I am able to make 5 though?!?!
But then the last one falls underneath since my screen is too narrow.
Could you please help showing which part of the code should be edited in order to get 4 columns?
I changed the number of columns in columnizer.js and columnize.js but it does not want to make 4 columns.
Thank you very much.
För att få fram magrutorna så krävs inte bara träningsövningar för magen utan även att äta korrekt dels ett motionsprogram för hela kroppen och då även magövningar.
Great but it doesn’t work in IE8.0.6+
It worked great in IE8.0 with jquery 1.4.2, but there is a bug in all versions of IE with the new jquery release 1.4.3.
The first two columns are positionned above each other instead of next to each other. A third column is nicely positionned next to the second column.
Hello Great plugin. I find it in paragram wordpress theme and try to get it work for me but i find some pb with ie. Maybe the new jquery framework is involve.
However il find that in line 56 you have this :
jQuery(this).css({cssFloat:’left’, width:”+col_Width+’px’});
I think cssFloat is the cause so i replace it with simple float and everything work great (at first sight).
If that help someone let me know :)
And thank you again for that plugin.
Thank you so much Joska!
Better make that change quick – it took me a while to figure that out!
[...] Multi Column List with jQuery [...]
to joska – I had the same problem in IE and came to the same solution by myself ;)
So cssFloat should be replaced with float.
Just wanted to leave a note here. I see this script is hella old, but I stumbled across it a couple months ago. Used it on two client sites, so far. Great work and thanks.
Love this plug-in. I use it to create a sort of tree view in the footer of my site.
Just a heads up for anyone running into problems in IE with the middle column not floating, around line #67 is a line that reads
jQuery(this).css({cssFloat:’left’, width:”+col_Width+’px’});
just change “cssFloat” to just “float” like this:
jQuery(this).css({float:’left’, width:”+col_Width+’px’});
Thank. You. Jeff. You saved my ass, ive been looking forever to figure out why WordPress 3.1 broke my theme in IE 6,7,8… thank you.
[...] Split long lists in columns with makeacolumnlists [...]
Hi, I’m not having any luck with this plugin. I’m trying to use it on my textpattern website. http://www.rosewaterfoundation.net/index
If anyone can help me out, that would be great!
Jim.
We will see many of these with HTML5/CSS3 not only jQuery.
This has been working for me, but I need a list to be 6 columns and the script won’t allow it, it just stays at 5 columns. If I go 7, it will do that, just no 6!
So, if anyone can help me I will be more than thankful!!
jQuery(document).ready(function($){
$('#footer_tags ul').makeacolumnlists({cols: 6, colWidth: 0, equalHeight: 'ul', startN: 1});
$('#alltags ul').makeacolumnlists({cols: 4, colWidth: 0, equalHeight: 'ul', startN: 1});
$('#allcategories ul').makeacolumnlists({cols: 4, colWidth: 0, equalHeight: 'ul', startN: 1});
});
这是一个很好的插件．谢谢．
不过我还是有一些疑问．插件中的列数是固定的．如何让它不固定呢？让它随浏览器宽度而定．比如http://www.pagesthink.com/
希望你能帮上我．
I am a Chinese. English is not good. Sorry
This is a good plug-ins. Thank you.
But I still have some doubts. Plugins in the number of columns is fixed. How it is not fixed it? Let it be with the browser width. For example http://www.pagesthink.com/
I hope you can help on me.
Nick, thanks so much for posting this. I’ve spent hours trying to figure out why IE6+7 weren’t showing my list numbers for an . Thanks!!
I’ve been looking for a plugin to do something like this but haven’t been able to find one. thanks.
has an error on IE9… not columnize. =(
somebody have an update for this plugin???
I had also some problem (not columnized) exactle with IE9.
I managed to solve it by setting colWidth to an exact value.
colWidth: xxx (usually it should the width of one column).
May be it would help you.
[...] http://codeasily.com/jquery/multi-column-list-with-jquery This entry was posted in Desclassificat and tagged css, jquery. Bookmark the permalink. ← Usar Jquery 1.4 / 1.5 a Drupal 6 [...]
Excellent, thank you for sharing, tried a few dynamic solutions, as my list was processed by a CMS this has been the best, I huge thanks and credit for sharing.
This line doesn’t make any sense:
if(jQuery(‘> li’, this)) {
jQuery(‘> li’, this) will always equal true in a conditional even if no elements are selected since it returns an object, and objects always equate to true.