jQuery enhanced HTML lists

I was playing around with CSS and ordered lists this evening, trying to make an ordered list with large item numbers and small list item text, and after much messing around discovered that what I was trying to achieve isn't really possible using just CSS and the OL or UL tags, and, after using jQuery for a while now, thought I'd have a go at creating a plugin to solve my problem.

It's nothing very complex, but it does the job. It simply looks at an OL or UL, strips out the HTML content of the child LI elements, and replaces the OL or UL with DIVS. This allows me to use CSS to style the numbers and text separately, using progressive enhancement. You can see a demo here.

Usage

To use it simply include jQuery in the head of your document...

<script src="your_path_to_jquery/jquery.min.js" type="text/javascript"></script>

Below that, include the jquery.enhanceList.js file...

<script src="your_path_to_jquery/jquery_enhanceList.js" type="text/javascript"></script>

Make sure you have the following CSS classes in your stylesheet, feel free to tweak it to your design requirements!...

.olContainer {
width: 450px;
margin: 5px;
border-bottom:1px dotted #cccccc;
padding-top:10px;
}
.olNumber {
font: 700 220% / 1 Georgia, "Times New Roman", Times, serif;
width: 30px;
margin: 0 10px 0px 10px;
text-align: center;
float: left;
position: relative;
padding: 0 10 10 10;
}
.olText {
white-space: normal;
font: 400 100% / 1 Arial, Helvetica, sans-serif;
padding: 0 0 10px 10px;
line-height: 1.5em;
}
.clearFix {
clear: both;
}

In your HTML document, you will need an ordered or unordered list, in my example, I am giving the target list a class called "enhance" to use as a selector...

<ol class="enhance">

<li>This is the first item, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>This is the second item Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li> Third item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Fourth item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Fifth item..Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Sixth item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

</ol>

It is a good idea to use an external javascript file to contain your code, rather than have script in your HTML document, so create a new .js file as follows, and save it as enhance.js in your sites script directory,...

$(document).ready(function(){
$('#activeEnhance').click(function(event){
$('ol.enhance').enhanceList()
})

Then include it in the head of your HTML page...

<script src="your_path_to_jquery/enhance.js" type="text/javascript"></script>

Thats it. All you have to do now is run it! I hope you find it useful. Feel free to let me know your thoughts on this. You can download sample code, and the plugin here

03 Nov 2008 Update: A visitor contacted me to let me know that my posted source code didnt work out "out of the box" - this was due to my source HTML referring to jQuery 1.2.6 which wasnt included in the zip. This has now been fixed. Apologies to you if you downloaded it and had problems due to this oversight!

Powered by ScribeFire.