Archive - Learn jQuery Now RSS Feed

Using jQuery Listnav Plugin

February 13, 2010 in Learn jQuery Now with 2 Comments

Yesterday I was looking around for a creative way to display what will eventually become a very large list of information. Generally I would just use extra links and sort them alphabetically. For me it had never seen like the most ideal solution. Forcing the user to wait while the page reloads itself is actually a bad solution. What if you could just have all the information load once and the user could then instantly browse all that information?

This is how I came across the jQuery ListNav Plugin by iHwy. It does exactly what I was looking for. It takes a large list of information and makes it very easy to work with.

All you have to do is place the location you want the navigation bar to go, then you create your unordered list, and then just put in a single jQuery command and it does the rest. It could not be simplier.

I have so many different ideas where this could be used. The one I probably see is creating an interactive product listing for an eCommerce site. Many websites make HTML versions of their sitemaps for SEO rankings. These pages generally have little to no use for the end customer because it usually is just a bunch of links displayed. With this plugin, you really could make this information useable by customers. A very neat concept.

You can view the demo of the plugin in action here. You can also view how I used this on another one of my websites by clicking here.

Creating a jQueryUI Accordian

February 6, 2010 in Learn jQuery Now with Comments Off

An accordion is the ideal choice for when you have to put a lot of information on the screen, but you do not have a lot of screen real estate available for that information.

Luckily for us we can create an accordion very easily using jQueryUI.

First thing you need to do is place all of your information inside your HTML like this:


<div id="accordion">
	<a href="#">First Section Title</a>
	<div>First Section's Content would be placed inside of this div</div>

	<a href="#">Second Section Title</a>
	<div>First Section's Content would be placed inside of this div</div>

	.... Repeat this for as many sections you want ....

</div>

Now that you have your HTML structure set up, now all you have to do is use some Javascript to tell jQuery UI to turn it into a the accordion.


<script type="text/javascript">
	jQuery(document).ready(function(){
		$('.accordion .head').click(function() {
			$(this).next().toggle('slow');
			return false;
		}).next().hide();
	});
</script>

Now you have a very easy way to put a large amount of information inside of a limited space.