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.

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.

I have made a lot of different changes to the website this weekend and I thought I should let everyone know about what is happening with the website.

First are foremost, I have changed the design of the website. I was never truly satisfied with the old look and I like this one a lot better. Your comments are welcome, but please remember that I am a programmer, not a designer (so constructive criticism only).

You will also notice that I have removed all advertising from the website. It hurt the look of the site and nobody was clicking on them anyways. There will still be advertising in the RSS feed, but that is the only place for now. No advertising now means that I can get rid of that ugly privacy policy.

I would also like to take this time to announce the launch of a new website that I will begin doing called Learn PHP Now. It will cover the exact same type of topics as this website, but with PHP. There were posts on this website where using PHP would have been very helpful to some of you, but it was not within the scope of this website to do so. So now I can fill in that gap with the launch of Learn PHP Now.

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.

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.

With all my journeys using jQuery, I have begun creating a special library file that contains little things that are not readily available in other plugins, but are incredibly useful. I was thinking that an expansive library of these little things would be very useful for all of us to have access to.

So I am considering creating this as an open source project. So I ask you the community, what kinds of things would you like to see? Is there a math function that you would find useful? Something else? Anything? I am open to suggestions. Please post a comment or send your suggestions to toolkit@learnjquerynow.com. If you have some code that you would like to contribute you can email them to me as well.

If you are a jQuery developer or even an aspiring jQuery developer (I do not have a problem helping people new to jQuery as long as they try their best) that would like to help out with the development in this, please send an email out to toolkit@learnjquerynow.com and we can begin to talk about this.

Learn jQuery Now was chosen to be 1 of the 11 Excellent Resources for learning jQuery by Designer Daily. I cannot thank them enough for such a great recommendation! I have only been doing this site for a short while and it was very nice to get such recognition.

I encourage everyone to check out Designer Daily. You can also take a look at the article that has Learn jQuery Now listed here.

Without a doubt, I have to say that jQTouch is one of my favorite plugins for jQuery. The prospect of being able to develop web applications that work on WebKit based browsers (specifically mobile ones) is very appealing.

Personally, I do not own a Mac (yet) so creating applications for the iPhone was looking like it was going to be incredibly difficult if not impossible. It was at this point that I first found jQTouch. This changed everything. In very little time I was putting together entire applications that was working on my iPhone.

I have been tracking their progress very carefully thought their SVN releases and I have been constantly impressed with how rapidly they have been improving the product. Beta 1 was noticeably slow when you did a vertical scroll on a page. This has been addressed and it now functions like a very close to a native iPhone App.

One of the most impressive things I have seen is that it somehow is able to grab the location from the iPhone. I have not dived that deep into their code yet to see how they pulled it off, but it is incredibly impressive.

In a nutshell, if I had an “Editor’s Choice”, I would give it to them without thinking twice about it. They have a real shot to change the way you see development for the iPhone. In fact, I am using this plugin as the cornerstone for a personal project that I will be sure to tell you all about here soon.

I suggest you check this one out even if you are not planning on developing an iPhone App. You can find it at: http://www.jqtouch.com/

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();

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 josh@notarealaddress.com)
separator - The separator of the email address (The “@” in josh@notarealaddress.com)
domain - The separator of the email address (The “notarealaddress” in josh@notarealaddress.com)
tld - The separator of the email address (The “com” in josh@notarealaddress.com)
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.