<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Web Masters Wall&#187; jQuery Category on WMW</title>
	<atom:link href="http://webmasterswall.com/topics/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://webmasterswall.com</link>
	<description>Website Templates, Flash Templates and Other Products</description>
	<lastBuildDate>Mon, 09 Nov 2009 21:20:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Multi Column List with jQuery</title>
		<link>http://webmasterswall.com/jquery/multi-column-list-with-jquery</link>
		<comments>http://webmasterswall.com/jquery/multi-column-list-with-jquery#comments</comments>
		<pubDate>Tue, 11 Nov 2008 19:07:10 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[column count]]></category>
		<category><![CDATA[column layout]]></category>
		<category><![CDATA[columnize]]></category>
		<category><![CDATA[few column]]></category>
		<category><![CDATA[few column list]]></category>
		<category><![CDATA[list]]></category>
		<category><![CDATA[Multi Column List]]></category>
		<category><![CDATA[multiple column list]]></category>
		<category><![CDATA[side-by-side]]></category>
		<category><![CDATA[Styling of ordered/unordered lists]]></category>

		<guid isPermaLink="false">http://codeasily.com/?p=44</guid>
		<description><![CDATA[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&#8217;t find a [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<p>Being a huge fan of <a href="http://jquery.com">jQuery</a>, it was naturally my go-to library of choice. </p>
<p>Scanning the <a href="http://plugins.jquery.com/">plugins</a> site, I can&#8217;t find a fair solution.</p>
<p>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&#8217;t control.<br />
<span id="more-44"></span></p>
<p>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 <code>float</code> parameter to make them all appear side-by-side.</p>
<h4>Features</h4>
<ul>
<li>Styling of ordered/unordered lists</li>
<li>Configurable column-count and width</li>
<li>Easy restoring to &#8220;non-column&#8221; layout</li>
<li>Requirements: JQuery 1.2 (<a href="http://docs.jquery.com/Downloading_jQuery">download</a>)</li>
<li>Browser-Compatibility: Firefox 1.5+, IE6+, Safari 2, Opera 9+</li>
</ul>
<p><script src="http://webmasterswall.com/demo/few-column-list/js/columnizer.js" type="text/javascript"></script><br />
<script type="text/javascript">
<!--
jQuery.noConflict();
jQuery(document).ready(function($){
    $('.toggle').toggle(function() {
	$('.list1').makeacolumnlists({cols: 2, colWidth: 0, equalHeight: 'ol', startN: 1});
    }, function() {
	$('.li_container').uncolumnlists();
    });
});
 -->
</script></p>
<h4>Usage</h4>
<p>Just apply to any group of DOM-elements gathered by the amazing JQuery-selectors. The provided arguments are optional (these are the default values).</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ol'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">makeacolumnlists</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>cols<span style="color: #339933;">:</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span>colWidth<span style="color: #339933;">:</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>equalHeight<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>startN<span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h4>Example</h4>
<style type="text/css">
/* list 1 style */
#content ol.list1 {
	background: url(http://webmasterswall.com/demo/ordered-list/images/orderedlist-bg.gif) left top repeat-y;
	font: italic bold 1em Georgia, Times, serif;
	margin:0px;	padding:10px 0 5px 0;
	color: #eeeeee;
}
#content ol.list1 li {
	margin-left:55px;
	padding-left:20px;
}
#content ol.list1 p {
	font: normal .8em Arial, Helvetica, sans-serif;
	color: #ffffff;
	padding:2px 0;
	margin:0px;
}
</style>
<p><a href="#nogo" class="toggle">Columnize / Uncolumnize</a> (equalHeight: &#8216;ol&#8217;)</p>
<ol class="list1">
<li>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</li>
<li>
<p>Cras vitae libero. Duis sed pede id erat laoreet varius.</p>
</li>
<li>
<p>Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</li>
<li>
<p>Cras vitae libero. Duis sed pede id erat laoreet varius.</p>
</li>
<li>
<p>Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</li>
<li>
<p>Cras vitae libero. Duis sed pede id erat laoreet varius.</p>
</li>
<li>
<p>Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. </p>
</li>
</ol>
<h4>Sourcecode</h4>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
#  * Copyright (c) 2008 Pasyuk Sergey (www.codeasily.com)
#  * Licensed under the MIT License:
#  * http://www.opensource.org/licenses/mit-license.php
#  *
#  * Splits a &lt;ul&gt;/&lt;ol&gt;-list into equal-sized columns.
#  *
#  * Requirements:
#  * &lt;ul&gt;
#  * &lt;li&gt;&quot;ul&quot; or &quot;ol&quot; element must be styled with margin&lt;/li&gt;
#  * &lt;/ul&gt;
#  *
#  * @see http://www.codeasily.com/jquery/multi-column-list-with-jquery
#  */</span>
jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">makeacolumnlists</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>settings<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	settings <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		cols<span style="color: #339933;">:</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">,</span>		<span style="color: #006600; font-style: italic;">// set number of columns</span>
		colWidth<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>		<span style="color: #006600; font-style: italic;">// set width for each column or leave 0 for auto width</span>
		equalHeight<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> 	<span style="color: #006600; font-style: italic;">// can be false, 'ul', 'ol', 'li'</span>
		startN<span style="color: #339933;">:</span> <span style="color: #CC0000;">1</span>		<span style="color: #006600; font-style: italic;">// first number on your ordered list</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> settings<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&gt; li'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>y<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> y<span style="color: #339933;">=</span>jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.li_container'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">size</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		    	height <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
		        maxHeight <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
				t <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				classN <span style="color: #339933;">=</span> t.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'class'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				listsize <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&gt; li'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">size</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				percol <span style="color: #339933;">=</span> Math.<span style="color: #660066;">ceil</span><span style="color: #009900;">&#40;</span>listsize<span style="color: #339933;">/</span>settings.<span style="color: #660066;">cols</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				contW <span style="color: #339933;">=</span> t.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				bl <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderLeftWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderLeftWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				br <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderRightWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderRightWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				pl <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingLeft'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				pr <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingRight'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				ml <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'marginLeft'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				mr <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>t.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'marginRight'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				col_Width <span style="color: #339933;">=</span> Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>contW <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>settings.<span style="color: #660066;">cols</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span><span style="color: #009900;">&#40;</span>bl<span style="color: #339933;">+</span>br<span style="color: #339933;">+</span>pl<span style="color: #339933;">+</span>pr<span style="color: #339933;">+</span>ml<span style="color: #339933;">+</span>mr<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">/</span>settings.<span style="color: #660066;">cols</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>settings.<span style="color: #660066;">colWidth</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				col_Width <span style="color: #339933;">=</span> settings.<span style="color: #660066;">colWidth</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #003366; font-weight: bold;">var</span> colnum<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
				percol2<span style="color: #339933;">=</span>percol<span style="color: #339933;">;</span>
			jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li_cont1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">wrap</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div id=&quot;li_container'</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">++</span>y<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; class=&quot;li_container&quot;&gt;&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>settings.<span style="color: #660066;">equalHeight</span><span style="color: #339933;">==</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			    jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&gt; li'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			        <span style="color: #003366; font-weight: bold;">var</span> e <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			        <span style="color: #003366; font-weight: bold;">var</span> border_top <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderTopWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderTopWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			        <span style="color: #003366; font-weight: bold;">var</span> border_bottom <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderBottomWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderBottomWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			        height <span style="color: #339933;">=</span> e.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingTop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingBottom'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> border_top <span style="color: #339933;">+</span> border_bottom<span style="color: #339933;">;</span>
			        maxHeight <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>height <span style="color: #339933;">&gt;</span> maxHeight<span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> height <span style="color: #339933;">:</span> maxHeight<span style="color: #339933;">;</span>
			    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;=</span>listsize<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">&gt;=</span>percol2<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> percol2<span style="color: #339933;">+=</span>percol<span style="color: #339933;">;</span> colnum<span style="color: #339933;">++;</span> <span style="color: #009900;">&#125;</span>
				<span style="color: #003366; font-weight: bold;">var</span> eh <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&gt; li:eq('</span><span style="color: #339933;">+</span>i<span style="color: #339933;">+</span><span style="color: #3366CC;">')'</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				eh.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li_col'</span><span style="color: #339933;">+</span> colnum<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ol'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>eh.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">+</span>settings.<span style="color: #660066;">startN</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">''</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>settings.<span style="color: #660066;">equalHeight</span><span style="color: #339933;">==</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			        <span style="color: #003366; font-weight: bold;">var</span> border_top <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderTopWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderTopWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			        <span style="color: #003366; font-weight: bold;">var</span> border_bottom <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderBottomWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderBottomWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					mh <span style="color: #339933;">=</span> maxHeight <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingTop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingBottom'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> border_top <span style="color: #339933;">+</span> border_bottom <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			        eh.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span>mh<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span>
			jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>cssFloat<span style="color: #339933;">:</span><span style="color: #3366CC;">'left'</span><span style="color: #339933;">,</span> width<span style="color: #339933;">:</span><span style="color: #3366CC;">''</span><span style="color: #339933;">+</span>col_Width<span style="color: #339933;">+</span><span style="color: #3366CC;">'px'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>colnum<span style="color: #339933;">=</span><span style="color: #CC0000;">2</span><span style="color: #339933;">;</span> colnum<span style="color: #339933;">&lt;=</span>settings.<span style="color: #660066;">cols</span><span style="color: #339933;">;</span> colnum<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ol'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li.li_col'</span><span style="color: #339933;">+</span> colnum<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> y<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">wrapAll</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;ol class=&quot;li_cont'</span><span style="color: #339933;">+</span>colnum <span style="color: #339933;">+</span><span style="color: #3366CC;">' '</span> <span style="color: #339933;">+</span> classN <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; style=&quot;float:left; width: '</span><span style="color: #339933;">+</span>col_Width<span style="color: #339933;">+</span><span style="color: #3366CC;">'px;&quot;&gt;&lt;/ol&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
					jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li.li_col'</span><span style="color: #339933;">+</span> colnum<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> y<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">wrapAll</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;ul class=&quot;li_cont'</span><span style="color: #339933;">+</span>colnum <span style="color: #339933;">+</span><span style="color: #3366CC;">' '</span> <span style="color: #339933;">+</span> classN <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; style=&quot;float:left; width: '</span><span style="color: #339933;">+</span>col_Width<span style="color: #339933;">+</span><span style="color: #3366CC;">'px;&quot;&gt;&lt;/ul&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>settings.<span style="color: #660066;">equalHeight</span><span style="color: #339933;">==</span><span style="color: #3366CC;">'ul'</span> <span style="color: #339933;">||</span> settings.<span style="color: #660066;">equalHeight</span><span style="color: #339933;">==</span><span style="color: #3366CC;">'ol'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>colnum<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> colnum<span style="color: #339933;">&lt;=</span>settings.<span style="color: #660066;">cols</span><span style="color: #339933;">;</span> colnum<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				    jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span><span style="color: #339933;">+</span> y <span style="color: #339933;">+</span><span style="color: #3366CC;">' .li_cont'</span><span style="color: #339933;">+</span>colnum<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				        <span style="color: #003366; font-weight: bold;">var</span> e <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				        <span style="color: #003366; font-weight: bold;">var</span> border_top <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderTopWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderTopWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				        <span style="color: #003366; font-weight: bold;">var</span> border_bottom <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderBottomWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderBottomWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				        height <span style="color: #339933;">=</span> e.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingTop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> parseInt<span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingBottom'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> border_top <span style="color: #339933;">+</span> border_bottom<span style="color: #339933;">;</span>
				        maxHeight <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>height <span style="color: #339933;">&gt;</span> maxHeight<span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> height <span style="color: #339933;">:</span> maxHeight<span style="color: #339933;">;</span>
				    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
				<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>colnum<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> colnum<span style="color: #339933;">&lt;=</span>settings.<span style="color: #660066;">cols</span><span style="color: #339933;">;</span> colnum<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #003366; font-weight: bold;">var</span> eh <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span><span style="color: #339933;">+</span> y <span style="color: #339933;">+</span><span style="color: #3366CC;">' .li_cont'</span><span style="color: #339933;">+</span>colnum<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			        <span style="color: #003366; font-weight: bold;">var</span> border_top <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderTopWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderTopWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			        <span style="color: #003366; font-weight: bold;">var</span> border_bottom <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> isNaN<span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderBottomWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'borderBottomWidth'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					mh <span style="color: #339933;">=</span> maxHeight <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingTop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> parseInt<span style="color: #009900;">&#40;</span>eh.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'paddingBottom'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> border_top <span style="color: #339933;">+</span> border_bottom <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			        eh.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span>mh<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span>
		    jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> y<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div style=&quot;clear:both; overflow:hidden; height:0px;&quot;&gt;&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">uncolumnlists</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.li_cont1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> onecolSize <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">++</span>i<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">' .li_cont1 &gt; li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">size</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i <span style="color: #339933;">+</span> <span style="color: #3366CC;">' .li_cont1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i <span style="color: #339933;">+</span> <span style="color: #3366CC;">' &gt; ul &gt; li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i <span style="color: #339933;">+</span> <span style="color: #3366CC;">' ul:first'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> j<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> j<span style="color: #339933;">&lt;=</span>onecolSize<span style="color: #339933;">;</span> j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i <span style="color: #339933;">+</span> <span style="color: #3366CC;">' ul:first li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'class'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'style'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i <span style="color: #339933;">+</span> <span style="color: #3366CC;">' ul:first'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'style'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li_cont1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">insertBefore</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i <span style="color: #339933;">+</span> <span style="color: #3366CC;">' &gt; ol &gt; li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i <span style="color: #339933;">+</span> <span style="color: #3366CC;">' ol:first'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> j<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> j<span style="color: #339933;">&lt;=</span>onecolSize<span style="color: #339933;">;</span> j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i <span style="color: #339933;">+</span> <span style="color: #3366CC;">' ol:first li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'class'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'style'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i <span style="color: #339933;">+</span> <span style="color: #3366CC;">' ol:first'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeAttr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'style'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li_cont1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">insertBefore</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#li_container'</span> <span style="color: #339933;">+</span> i<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>There are few parameters &#8211; 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, &#8216;ul&#8217;, &#8216;ol&#8217;, &#8216;li&#8217; to set equal height for ul/ol or li elements; startN, the start number of numbered list.</p>
<p>I&#8217;ve tested with IE 6&#038;7, FF3, Safari3 and Opera 9. The code could use a bit of refactoring perhaps for the purpose of beautification. View my <a target="_blank" title="Ordered List" href="http://webmasterswall.com/demo/few-column-list/few-column-list.html">demo file</a> to see more samples or <a title="Download" href="http://webmasterswall.com/demo/few-column-list/makeacolumnlists.zip">download</a><br />
I&#8217;ve added this to the <a href="http://plugins.jquery.com/project/makeacolumnlists">jQuery Plugin</a> site.</p>
]]></content:encoded>
			<wfw:commentRss>http://webmasterswall.com/jquery/multi-column-list-with-jquery/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
