David Link's Upsidestudio | Web Design and Development, Information and Inspiration

May 29

2009

‹ Older

Splitcol: Split a list in two with jQuery

The Problem

Recently, I was giving a bit of help to a friend of mine with a site redesign he was implementing. He came to me with a problem he was having with the dropdown navigation. The design required the dropdown to have two columns of links, but the back-end was spitting them out in a single list.

My first thought was just to float the list items next to each other, but since some list items would be two lines long, it caused some nasty vertical spacing issues. The solution was to turn the one list into two.

Before you continue reading, check out the demo so you can see what it actually does.

How to Fix It

Step 1: The Library

If you don’t already have jQuery running on the site, download it here and drop it on your server. Or if you’d like you can use the version from jQuery’s Google Code project (Which is what we’ll be doing for this demo).

To include jQuery, insert the following code somewhere between the <head> tags of your document:

<script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

or if you’re using a version from your own server:

<script type="text/javascript" charset="utf-8" src="http://[Your Domain]/jquery-1.3.2.min.js"></script>

Step 2a: The Markup

Since we don’t necessarily want to split every list on the site, we’re going to use classes as a special marker for which lists we’ll be splitting. We’ll use the class “splitcol”.

Example:

<ul class="splitcol">
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
     <li>Four</li>
</ul>

Step 2b: The Styling

This step is optional. If we’d like the two lists to appear next to one another, we’re going to have to use a bit of CSS. Add the following to your stylesheet:

.splitcol {
     float: left;
}

Step 3: The Script

Finally, we’ll need to add the keystone. Either in the <head> of the document, or in a separate external JS file, drop in the following code:

$(document).ready(function() {
     $('.splitcol').each(function() {
          if($(this).is("ol")) { var ordered = true; }
          var colsize = Math.round($(this).find("li").size() / 2);
          $(this).find("li").each(function(i) {
               if (i>=colsize) {
                    $(this).addClass('right_col');
               }
          });
          if(ordered) {
               $(this).find('.right_col').insertAfter(this).wrapAll("<ol class='splitcol' start='" + (colsize+1) + "'></ol>").removeClass("right_col");
          } else {
               $(this).find('.right_col').insertAfter(this).wrapAll("<ul class='splitcol'></ul>").removeClass("right_col");
          }
     });
});