Made of Everything You're Not

I had a project recently to build a custom tooltip for a client site. The spec called for something the opposite of out of the box so it would have to be done as a custom job; no single off the shelf plugin would work here. There was one in particular that I was really stoked I could use to make development a lot easier; hoverIntent.

When I started thinking about how to approach this project an immediate worry I had was how to bypass the snappiness of the default jquery hover behavior. As you’d probably expect it’s perfect, which sums up my problem; the project requirements called for an ajax tooltip which means every time it was activated a call to the server would happen. This would SUCK if it happened too much for basic performance reasons so it was important that there wasn’t any unnecessary server calls. Using the default behavior a user just dragging their mouse over the links would make a server call. This was no good.

Off the top of my head the best way to handle this situation was to write in some timers to delay the server call and add in some checks. Frankly though, I’m much too lazy for all that so I hit up my goto source for all code related head scratchers: StackOverflow. There I heard about hoverIntent; a great plugin which handles all of the above and then some.

In a nutshell, hoverIntent works by replacing the normal calls to “hover” with “hoverIntent” with the same parameters as “hover”. A basic example of both techniques would be:

//default jquery hover usage
$("#demo1 li").hover( overCallBack, outCallBack );
 
//default jquery hover usage
$("#demo1 li").hoverIntent( overCallBack, outCallBack );

Note that there are 2 parameters that can be passed and they’re the same regardless of whether you’re using “hover” or “hoverIntent”; both are functions with the first being the over state (when the user mouses over the item) and the second being the out state (when the user moves their mouse off the item).

The above is the easiest and fastest way to use hoverIntent but there’s another, better, method that allows for much more customization. By passing hoverIntent and single object you can customize how the plugin behaves. hoverIntent allows for customization of the sensitivity and the interval, which according to the official site means:

timeout:
A simple delay, in milliseconds, before the “out” function is called. If the user mouses back over the element before the timeout has expired the “out” function will not be called (nor will the “over” function be called). This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take

sensitivity:
If the mouse travels fewer than this number of pixels between polling intervals, then the “over” function will be called. With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. With higher sensitivity thresholds you are more likely to receive a false positive. Default sensitivity: 7

interval:
The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. When the user’s mouse first enters the element its coordinates are recorded. The soonest the “over” function can be called is after a single polling interval. Setting the polling interval higher will increase the delay before the first possible “over” call, but also increases the time to the next point of comparison. Default interval: 100

The below example illustrates how the object should be created and passed.

var settings = {
    sensitivity: 4,
    interval: 75,
    over: overCallBack,
    out: outCallBack
}; 
$("#demo1 li").hoverIntent( settings );

And there you go; a better way to handle hovering over elements with jquery.

Building the fancy, web 2.0 / Ajaxy, user interfaces for a web application we’ve all come to expect is, frankly, a pain in the ass. Depending on the JavaScript library you’re using there’s usually some addon library to extend the functionality for UI which helps make it easier and ease the pain. If you’re using jQuery (and to be honest I’m more of a Prototype guy) a good library is jQuery Ui.

JQuery UI

According to the official site:

jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library. Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

I only ran into it because of an update to WP-Click-Track and WordPress uses jQuery so I kinda had to. Not that it’s a bad thing; I like jQuery a little bit more because of jQuery UI.

One of the really cool things about jQuery UI is that there’s an online tool to generate a custom download specific to the project. Having worked with JavaScript libraries for a while I appreciate the customization and convenience of having the smallest footprint as possible. Kudos to them on that.

There’s also a Theme Builder that gives a good overview of what’s available by default along with some preset themes to test; there’s a good deal of widgets there to work with. Almost, almost, makes me want to start a project with it.

jQuery UI - ThemeRoller

Implementation is really elegant too; if you know how jQuery works it’ll be pretty obvious. Otherwise take a look at the below for creating tabs:

<div id="tab-jquery-id">
	<ul>
		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		<li><a href="#tab3">Tab 3</a></li>
		<li><a href="#tab4">Tab 4</a></li>
		<li><a href="#tab5">Tab 5</a></li>
	</ul>
	<div id="tab1">
 
	</div>
	<div id="tab2">
 
	</div>
	<div id="tab3">
 
	</div>
	<div id="tab4">
 
	</div>
	<div id="tab5">
 
	</div>
</div>
 
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function($) {
	//jQuery UI 1.5.2 doesn't expect tab ID's at DIV, so we have to apply a hotfix instead
	var needs_jquery_hotfix = (($.ui.version === undefined) || !$.ui.version.match(/^(1\.[7-9]|[2-9]\.)/));
	$("#tab-jquery-id"+(needs_jquery_hotfix ? ">ul" : "")).tabs({
		selected: 0
	}); 
	$('.tab5:last').show().removeClass('tab5');
});
//]]>
</script>

As you can see there’s not much there in so far as design or class decorators go; most of that’s handled by jQuery itself as well as the generated css. The only thing to really worry about is adding the wrapper div id in the bottom JavaScript. Still, not a bad thing.

This, of course, barely scratched the surface of jQuery UI but it doesn’t get much more difficult. If you’re using jQuery for a library and you need to make something cool it’s definitely worth checking out.