We released a bug fix for our jQuery listnav plugin today to resolve an issue that occurred if the main list's list items had nested lists inside of them. The plugin was including the nested list in the counts that appear above the letters in the dynamically created navbar and was hiding the nested list items when it should not have been. Thanks to folks on the jQuery developers list for pointing this out!

We've seen some great usage of the plugin in some sites out there. Have a feeler out to the site authors to see if they'd like a mention. If you're using the plugin, we'd like to see how. Feel free to drop us a quick line and any feedback you have. Thanks!

Today we're releasing a jQuery plugin that we created for the business directory section of a pet project site of ours, www.hwy9.com. We'd always wanted to have a javascript-based control that we could easily apply to long lists of items to allow quickly navigating around the list. Since most lists are alphabetically sorted, we came up with a plugin that allowed us to have a long list and then, by binding the list to our jQuery listnav plugin, an alphabet-based navigation bar would magically appear above the list, showing all of the letters from A to Z. Clicking on a letter dynamically filters the list, so you can, for example, click on C and the list changes on-the-fly to show you only items beginning with C.

There are lots of neat little features to the control. We've posted full information and demo's here.

A couple of the interesting features worth calling out are 1) that when you hover over a letter in the list navigation bar, a count appears above the letter, telling you how many items will appear if you click that letter 2) letters that don't have any items under them appear looking "disabled", as a visual clue that there aren't any items starting with that letter (so that the user doesn't have to find out by clicking the letter).

One of the demos (demo 4) also shows using the listnav plugin on a list that has floated items in it. In the demo, each list item looks like a box and they are arranged left-to-right, row by row. Clicking on a letter shows only the boxes that have wording that starts with that letter. This could be handy for making an address-book like layout on a web site: click the letter in the navigation to see the contacts that start with Y, for example. Each box can contain anything you want it to: the listnav control pays attention only to the first letter of the first text in the list item.

The control has been optimized for speed. It's able to handle binding to lists with hundreds of items in them very quickly. Any jQuery selector can be used to bind to your lists, so you can bind it to multiple lists on a single page using just a CSS class name, if you want to. It works with UL and OL (numbered) lists. If you use an OL, the numbers restart themselves for each set of list items that appear (ie, if you click on 'C' and that has 5 items, they will appear numbered from 1-5).

We hope you enjoy the jQuery listnav plugin. We enjoyed creating it.

Centering a block of content is a common requirement when laying out a web page, but it's often not completely obvious how to do it. Here's a common way we do it, which has worked nicely for us:

For the HTML:

The "wrapper" is the container that the div you want to center will be inside of. The "block" is the div that contains your content.

<div id="wrapper">
<div id="block">
This div is centered inside it's parent div.<br/>
This div is centered inside it's parent div.<br/>
This div is centered inside it's parent div.<br/>
This div is centered inside it's parent div.<br/>
This div is centered inside it's parent div.<br/>
This div is centered inside it's parent div.<br/>
</div>
</div>

For the CSS:

Here's the styling for the wrapper and the block. Comments are included to help you understand how it works.

* { margin:0; padding: 0 } /* shortcut browser reset: optional */
#wrapper { 
text-align:center;        /* centers the #block */
padding:10px 0;           /* to separate the blocks a bit for this example*/
border:1px solid green;   /* to help you see the border */
}
#block { 
text-align:left;          /* removes the centering from #wrapper
width:250px;              /* width of your block
margin:0 auto;            /* 'auto' equalizes the left and right margins
border:1px solid red;     /* to help you see the border */
}

Here a screenshot of the results: