[jQuery] Splitting long lists
I don't know how useful this will be to people, but since I sort of
hacked my around it, maybe it'll help someone else. Sorry for the
messy code.
Sometimes I get long lists foisted upon me whose sole purpose I think
are to uglify my nice neat layout. So I started looking in to ways to
display a two-column list to cut down on the huge blank space left on
the right:
http://www.alistapart.com/articles/layeredfudge/
Marking up more than one list using this solution seemed like an awful
lot of work, and someone out there thought so too:
http://www.chriscassell.net/log/2005/02/17/splitting_lists.html
However, this just seemed overly complex for my needs, so I grabbed
the above javascript, and tried to write a simpler function using
jQuery. You just call it, pass it the ID of the list you want to
balance, and a class name, and away it goes. It doesn't do any of the
fancy "is this a ul or an ol" logic, and I'm pretty sure it might well
destroy nested lists (haven't tested that theory), but it seems to
work.
When calling the function, 'optionslist' is the ID, and 'left' in my
case is just defined as {float: left; }
balance('optionlist','left');
I'm not much of a programmer, so I'm sure there's loads of
improvements - one being to take either an ID or a class, or to set
the number of columns that it is broken into. The logic is almost the
same, except his method seemed excessive (moving items to a new list
until the halfway point, then moving what's left into the second
list), so I tried to trim that down by only moving the second half of
the list.
function balance(list,class){
jQuery('#'+list).after('<ul id="'+list+'-b"></ul>'); //
add another ul for the items to go into
var items = jQuery('#'+list+'
li'); // grab the list of items
var itemsLength = items.length/2; //
find out how big *half* the list is
for (i = itemsLength; i < items.length; i++){ //
starting from the middle, loop until the end of the list
jQuery("#"+list+"-b").append(items[i]);} //
while looping, move each item to the second list
jQuery('#'+list).addClass(class).attr("id",list+"-a"); //
normalize the names and classes of the lists
jQuery('#'+list+"-b").addClass(class);
}