So I needed a method to take a long, nested list and turning it into a compact, multiple acolumn list, in order to display it as sort of a site map for the home page for a site I'm working on.
Being a huge fan of jQuery, it was naturally my go-to library of choice.
Scanning the plugins site, I found a possible solution from a feller called Ingo Schommer called columnizeList.
Score, right? Well... not exactly, at least for my case.
Ingo used some of the methodoligies outlined in this article on multi-column lists on A List Apart. One of the caveats of his methodology is that each list item has to be the same height. This works Ok for a lot of use cases, but since I'm using a Drupal menu as the source for the list, it could contain arbitrary text I don't control.
So, I started from scratch. Instead of relying on consistent line heights, and applying different margin settings to list elements, I instead 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.
Here's a sample list for a demonstration, cribbed from Ingo's example:
- harold (3550)
- horatio (1320)
- hitler (1120)
- henry (784)
- hector (358)
- haploid (315)
- hopping (50)
- herbert mulroney (44)
- hopscotching (29)
- hominibus (19)
- honkey (19)
- hermoine (18)
- hieronymus (13)
- halliburton (12)
- hummer (10)
- harlod (10)
- heironymious (9)
- hemorrhoids (7)
- hammersack (6)
(apparently a list of the most common fillers for the middle initial in Jesus H. Christ)
Anyway, here's what my script does to the above list:
- harold (3550)
- horatio (1320)
- hitler (1120)
- henry (784)
- hector (358)
- haploid (315)
- hopping (50)
- herbert mulroney (44)
- hopscotching (29)
- hominibus (19)
- honkey (19)
- hermoine (18)
- hieronymus (13)
- halliburton (12)
- hummer (10)
- harlod (10)
- heironymious (9)
- hemorrhoids (7)
- hammersack (6)
And here's the code:
/*
Copyright (c) 2007 Christian yates
christianyates.com
chris [at] christianyates [dot] com
Licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php
Inspired by work of Ingo Schommer
http://chillu.com/2007/9/30/jquery-columnizelist-plugin
*/
(function($){
$.fn.columnizeList = function(settings){
settings = $.extend({
cols: 3,
constrainWidth: 0
}, settings);
// var type=this.getNodeType();
var container = this;
if (container.length == 0) { return; }
var prevColNum = 10000; // Start high to avoid appending to the wrong column
var size = $('li',this).size();
var percol = Math.ceil(size/settings.cols);
var tag = container[0].tagName.toLowerCase();
var classN = container[0].className;
var colwidth = Math.floor($(container).width()/settings.cols);
var maxheight = 0;
// Prevent stomping on existing ids with pseudo-random string
var rand = Math.floor(Math.random().toPrecision(6)*10e6);
$('<ul id="container'+rand+'" class="'+classN+'"></ul>').css({width:$(container).width()+'px'}).insertBefore(container);
$('li',this).each(function(i) {
var currentColNum = Math.floor(i/percol);
if(prevColNum != currentColNum) {
if ($("#col" + rand + "-" + prevColNum).height() > maxheight) { maxheight = $("#col" + rand + "-" + prevColNum).height(); }
$("#container"+rand).append('<li class="list-column-processed"><'+tag+' id="col'+rand+'-'+currentColNum+'"></'+tag+'></li>');
}
$(this).attr("value",i+1).appendTo("#col"+rand+'-'+currentColNum);
prevColNum = currentColNum;
});
$("li.list-column-processed").css({
'float':'left',
'list-style':'none',
'margin':0,
'padding':0
});
if (settings.constrainWidth) {
$(".list-column-processed").css({'width':colwidth + "px"});
};
$("#container"+rand).after('<div style="clear: both;"></div>');
$("#container"+rand+" "+tag).height(maxheight);
// Add CSS to columns
this.remove();
return this;
};
})(jQuery);
Download
There are only two parameters - cols, the number of columns to break the list into, and constrainWidth a boolean (defaulting to false) to specify whether you want all columns to be the same width.
I've tested with IE 6&7, FF3, Safari3 and Opera 9.something (for the three Opera users on the planet). The code could use a bit of refactoring perhaps for the purpose of beautification.
Update: I've added this to the jQuery Plugin site.
Recent comments
6 days 8 hours ago
6 days 10 hours ago
6 days 21 hours ago
2 weeks 1 day ago
2 weeks 1 day ago
3 weeks 4 days ago
3 weeks 4 days ago
6 weeks 4 days ago
6 weeks 5 days ago
6 weeks 5 days ago