However, I just had some problems getting some jQuery to run on the login / registration form. I used wp_enqueue_script like a good WP developer but… no go. Where’s my jQuery?

It seems the answer lies in the fact that after scripts are enqueued in a normal WP page, they get spit out by something inside the call to wp_head(). I guess you could add wp_head() to the login header, but who wants all those redundant plugin scripts and styles that (presumably) aren’t even meant to be there.

After a bit of diggiing around it seems that the solution is the wp_print_scripts() function. So, to get jQuery working on the login form, put these lines in the code you hook onto login_head:

wp_enqueue_script( 'jquery' );
wp_print_scripts();

It’s not just being stubborn, though. Sometimes you want to re-invent the wheel so you know how to make better wheels yourself. In coding, you have to strike a balance between getting stuff done quickly and efficiently by relying on what’s already been done, and actually progressing your own skills.

Anyway, today I solved something that had been bugging me for a while: creating slick drop-down menus. I know CSS-based drop-downs, and they’re a good thing. But having got into jQuery recently, I wanted to get them right with scripting.

The main trick I’d missed was how to make sure that if the cursor passes quickly over a menu item, the “show menu” bit doesn’t get triggered—preventing shoddy, jittery menus popping up all over as you reach for the page scroller or something.

Well, after a few hours’ wrangling, here’s the code:

jQuery( document ).ready( function($) {
	var navTimers = [];
	$( "#nav-main ul.nav > li" ).hover(
		function () {
			var id = jQuery.data( this );
			var $this = $( this );
			navTimers[id] = setTimeout( function() {
				$this.children( 'ul' ).fadeIn( 300 );
				navTimers[id] = "";
			}, 300 );
		},
		function () {
			var id = jQuery.data( this );
			if ( navTimers[id] != "" ) {
				clearTimeout( navTimers[id] );
			} else {
				$( this ).children( "ul" ).fadeOut( 200 );
			}
		}
	);
});

A few words of explanation:

The navTimers array is crucial. The key to all this is storing a separate setTimeout() timer reference for each menu element that the cursor goes over.

OK, so #nav-main ul.nav > li selects the immediate children of my main nav menu list, and then I set up the hover functions.

The first line in each hover function uses the jQuery data() function, which returns a unique ID for the current element (just an integer, which seems to be related to the order of the elements). We use that as our key for the navTimers array.

In the “over” function, we create a reference to the jQuery object for the current element, so we can pass it through to the function inside setTimeout(). Then when initialize the setTimeout() itself, the function inside it doing two things:

1. Triggers the jQuery fadeIn() effect.
2. Clears its own reference in navTimers. (Actually I’m not sure if this is cleared automatically after the timer expires—I did this just to be safe.)

That 300 at the end of the setTimeout() is the number of milliseconds it’ll wait before triggering the fadeIn(). The 300 inside the fadeIn() is the number of milliseconds jQuery will take to do the fade.

The “out” function checks if there’s a timer set for the current element. If there is, it just clears it. This is the eventuality where the cursor has gone over and then out of the element’s space within our set limit (300 ms). If there isn’t a timer, i.e. the timer’s expired and the drop-down’s been shown, then it hides the drop-down.

Whew! Do let me know if you spot any issues, or ways of doing things better.

Oh, if you’re here looking for a ready-made drop-down menu solution, including markup and CSS… apologies, but this post is to help out other who are being stubborn and a re-inventing the wheel ;-). But really, if you can’t find a good plugin (I’m working within the WordPress world here by the way), the markup and CSS are the easy bits. Hopefully the above helps out with the tricky JavaScript.