Tag Archive - toolkit

Use hoverIntent To Capture Your Users Mouse Intentions

October 15, 2009 in Uncategorized with Comments Off

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

October 8, 2009 in Uncategorized with Comments Off

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.