Using jQuery Listnav Plugin

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

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.

Use hoverIntent To Capture Your Users Mouse Intentions

First of all, allow me to apologize for that title. There really is no better way to describe in a concise way what hoverIntent does. HoverIntent is a jQuery plugin that helps you capture mouse events only when your user intends to have them fire.

There is an example available for this demonstration that is available at: http://www.learnjquerynow.com/demos/hoverIntent.php. You will want to look at the source to see how everything is done.

The most ideal problem this plugin solves is having complex menus for your website to show and hide in a way that is very smooth and natural for the user. You can have menus only appear and disappear only when you are sure that is what your user wants to do.

This is without a doubt a plugin that you do not want to forget about. It is just too helpful to not have in your toolkit.

Use jQuery To Make Multiple Columns The Same Size

Probably just about every web developer has run into this problem. You have a two or three column layout on your website and your center column has a ton of great content that spans a very long way down the page and your side bars are short. They are different colors and they just look funny. Well today I have the solution for you!

Using jQuery you can actually tell your columns to become the same height as the longest column. It is actually very easy to do and you will find that you use this over and over again.

Let’s take a look at the code:

function heightmatch(columns) {
 var highest = 0;
  for( var i in columns ) {
   if( $(columns[i]).height() > highest ) {
    highest = $(columns[i]).height();
   }
  }

  for( var j in columns ) {
   $(columns[j]).height(highest);
  }
}

As you can see the code is very simple. You pass the function an array of your jQuery selectors that you want to be the same height and it goes through, finds the longest one, and then sets the height of all of them to the tallest value.

Very simple. You can expect this to be in the jQuery Toolkit that I we are planning on putting together.

Pre Load Your Webpage Using jQuery

Preloading a webpage image is not an easy feat. Some don’t look good, others don’t really work. QueryLoader is a very quick and easy way to pre load images for your website.

You can download QueryLoader from http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/. The code is incredibly simple. All you have to do is include the plugin and then place the following line of code at the end of your page:

QueryLoader.init();

Create Your First jQuery Plugin

Today is a big day. Up until now we have been using other people’s plugins to improve our web applications. Today we will create our own. It will be an incredibly simple plugin, but will build a foundation for creating more advanced plugins.

This plugin will require you to look at the following pages:

http://www.learnjquerynow.com/lib/addresshide/1.0/addresshide.js
http://www.learnjquerynow.com/demos/addresshide.php

The addresshide.js file contains the actual code for the jQuery Plugin. The php file is our implementation test. What our plugin will do is hide an email address from spam crawlers. It does this by taking in a series of arguments and simply concatenating them together to create a single string. You could do this with simple jQuery or JavaScript code but why not create a plugin? It is a useful function that you will could use over and over again in many different projects.

So on to the explanation of the code.

In the plugin you will notice that there really is not much code here. The most important part of this file is the jQuery.extend({}) line. What this does is tells jQuery that this code is an extension. You will notice that we are using jQuery instead of $. This is because there are other JavaScript libraries use the $ function and this will force the JavaScript to use the jQuery object.

Inside of the extend function you will notice addresshide: function(options) {}. This is the name of our function that is going to be called. This function will be called in the format $.addresshide(opts).

The options parameter is actually a JavaScript object. It contains the following values:

name – The username of the email address (The “josh” in [email protected])
separator – The separator of the email address (The “@” in [email protected])
domain – The separator of the email address (The “notarealaddress” in [email protected])
tld – The separator of the email address (The “com” in [email protected])
write – This is a boolean value that when true, writes the created email address out using document.write command
selector – This is a string value that places the created email address in selector provided.

Now you can take a look at the PHP file and see how the plugin is utilized. You simply call it using the code described above, giving it the options required and you have yourself your first plugin.

What I would recommend is creating your own “jQuery” library that is your own personal toolbox of things that make your life easier.

Basic Form Validation Using The jQuery Validation Plugin

Form validation is a very important part of any web application. You have to make sure that your users are going to enter a numerical value when they put data into a quantity field (You don’t want them to enter “one” into a quantity field, unless of course you want to try and handle that kind of input). However it goes much deeper than just requiring a number. You have phone numbers, URL’s, email addresses, numbers that can’t be negative. It goes on and on.

jQuery has a plug in that will handle all your form validation needs. It is called the jQuery Validation Plugin. It is once of the earliest plug ins that were developed for jQuery. What it allows you to do is define what form elements needs to be validated, how to validate the element, and what to do if the element is invalid.

This post has an accompanying demo that can be found here.

Hot Linking The jQuery Validation Plugin

Microsoft allows hot linking of the Validation Plugin so you do not have to host the library. The URL of the plugin is: http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js

Basic Validation

This form has very basic validation. It is ideal if you want quick and dirty validation of a form. All you have to do is put your validation rules into the class attribute for your form input elements (there are some other elements that these can go into). The form is automatically validated when the form submit button is clicked, but before the form is actually submitted.

In the example, the required value in the class attribute specifies that the field is required. Any value inside of the element is acceptable. It just cannot be blank. The email value in the class attribute requires that the value in the input field be an email address. The url value in the class attribute requires that the value in the input field be formatted as an URL (complete with the http:// at the beginning)

Some of the basic validation can take place outside of the class attribute. These tend to go inside of their own attributes on the input element. For example, the minlength attribute. The minlength attribute, specifies that the input tag be a specific length.

Use jQuery To Disable Right Clicking On Your Page

Let me be clear about one thing before we begin. I think that doing this is obnoxious. If you really think you can achieve something by stopping right clicking, you are wrong. If someone wants to get to something on the right click, they will find a way around it.

Having said that, jQuery makes it extremely easy to disable right clicking on your pages. All you have to do is enter the following code:


$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});