There is a solution, of course – just like almost every part of jQuery, the Sizzle selector engine is extensible. That’s right – you can implement your own selectors that you can then use just like native selectors (big props to Ben Nadel for demonstrating this technique). One of my first needs in this realm was to create a ‘between’ selector – give me all the elements ‘between’ selectors for element A and element B. Here’s an example of what we want the syntax to look like:

var rowsBetween = $('tr:between(tr:contains(Start), tr:contains(End))');

Given the selector above, we would expect it to return the following table rows:

In order to implement this selector, we’re going to make a few assumptions in order to get it to work. First, we’re going to assume that both the inside selectors resolve to a single element (actually, they can resolve to any number of elements, we will just use only the first match). Next, we are going to assume that the first element actually occurs before the last element. These assumptions obviously make for a buggy implementation of a real selector, but they are perfectly acceptable for a user-driven project.
So, down to it. The first thing we are going to do is setup the jQuery selector engine extension method:

$.expr[':'].between = function(
    objNode,
    intStackIndex,
    arrProperties,
    arrNodeStack)
{
	// Placeholder logic...
	return false;
};

Ben Nadel has an excellent writeup on the selector engine interface in his article http://www.bennadel.com/blog/1457-How-To-Build-A-Custom-jQuery-Selector.htm, so no need to cover it again. Now, our next task is to write the guts of our selector. Here’s the algorithm we are going to be implementing:

1. Split the arguments by ‘,’ (comma), so that we have the start and end selectors.
2. Find the start and end elements that correspond to the start and end selectors.
3. Is the element we are currently testing between the start and end elements?
   1. Yes -> return true
   2. No -> return false

This is a relatively easy algorithm to implement. First, let’s do the chopping:

    var args = arrProperties[3].split(",");
    var startSelector = args[0];
    var endSelector = args[1];

Now that we have the ‘between’ selector values, let’s get the corresponding elements from the element collection.

 var startIndex = -1;
    var endIndex = -1;

    // Find the start and end indexes.
    for (var index = 0; index < arrNodeStack.length; index++)
    {
        if ($(arrNodeStack[index]).is(startSelector) && startIndex < 0)
            startIndex = index;
        else if ($(arrNodeStack[index]).is(endSelector) && endIndex < 0)
            endIndex = index;
    }

$(arrNodeStack[index]) gives us the element that we are currently iterating over. In order to see if it matches our start/end selector, we use the jQuery is() method. We have a little handling here to keep from overwriting our values if we’ve already found a match, but it’s all pretty self-explanatory.

Our last task is to check to see if our selected element is between the start and end elements, and return the appropriate value. That again is pretty straightforward:

    if (startIndex >= 0 &&
        endIndex > 0 &&
        intStackIndex > startIndex &&
        intStackIndex < endIndex)
        return true;
    else
        return false;

Putting this all together, we get the following:

$.expr[':'].between = function(
    objNode,
    intStackIndex,
    arrProperties,
    arrNodeStack)
{
    var args = arrProperties[3].split(",");
    var startSelector = args[0];
    var endSelector = args[1];

    var startIndex = -1;
    var endIndex = -1;

    // Find the start and end indexes.
    for (var index = 0; index < arrNodeStack.length; index++)
    {
        if ($(arrNodeStack[index]).is(startSelector) && startIndex < 0)
            startIndex = index;
        else if ($(arrNodeStack[index]).is(endSelector) && endIndex < 0)
            endIndex = index;
    }

    if (startIndex >= 0 &&
        endIndex > 0 &&
        intStackIndex > startIndex &&
        intStackIndex < endIndex)
        return true;
    else
        return false;
};

That’s it! We’ve now got the ability to use the ‘between’ selector just like any other jQuery selector. Pretty simple, no? From not knowing a thing about selector engine extension to a finished product, this was only a few hours of work (mostly research, too). If you’re looking for an opportunity to try implementing a custom selector, try that ‘previous adjacent’ selector I talked about in the opening paragraph – it should be pretty easy to implement.

I think the new ‘live’ event handlers are going to be great. I can’t stress how much the ‘live’ method has helped my JavaScript development – it makes event binding much less of a chore when dynamically creating page content (especially for trivial things, like bindings for button hover behavior). One of the things I’ve disliked, though, is the change event of dropdowns isn’t able to be live captured, which has led me to use Live Query for those purposes. With 1.4, it can be done with jQuery alone.

It will certainly be interesting to see if the Lazy Load code is included, for on-the-fly .css and .js includes. By conditionally loading javascript and css, a lot of bandwidth could be conserved by choosing to defer file retrieval for little-used site features.

Some of the other cool new features will undoubtedly be radio classes and the offset get/set methods – I can see using those to save a few lines of code. I’m betting that there will also be some performance increases with 1.4, so I’m excited about the release, even if it’s release is still a few months off yet.

I’ve just released my latest plugin, the jQuery UI Image Carousel! The plugin is a standard-fare image carousel, and it’s also fully compatible with jQuery UI. It’s got a few options that make it fairly versatile – from a minimal look all the way to a collapsible version with a custom header.

The JavaScript itself wasn’t that daunting – version 1.0 clocks in at around 180 lines. Most of it is presentation management as well – making sure that the correct jQuery UI classes are applied to the markup, and so forth. In total, it was a bit of a longer exercise – there was a lot of work to insure compatibility with older versions of IE, for instance. I hope you enjoy, and if you use it, please take a sec to leave a comment with your page URL.

<a href="blah..." onclick="return DoAction();">Link</a>

...

function DoAction() { /*Do Something */ return false; };

However, there’s a better way, using the event.preventDefault() method. I had the need to use this recently, when I was fixing a trivial issue with the Filament Group jQuery UI buttons – my ‘a href’ styled buttons were still clickable when they were disabled. An easy solution to this problem is to capture the click and prevent the default action. I hooked this action to all disabled buttons, as such.

$(".ui-state-disabled").click(function(event) { event.preventDefault(); });

This code isn’t that robust – if you were to add or remove the ui-state-disabled class after page load (which I didn’t have to), you’d want to make sure to handle it appropriately. Either way, preventDefault() is definitely an elegant solution to disabling a click action.

In other development, I’ve been trying to learn how to implement iPhone style gesture controls via JavaScript. I’ve been seriously spinning my wheels on this – my demo is turning out to be a dud, of sorts. It’s frustrating (especially the testing, which I can only do on my iPhone currently), but hopefully it comes together sooner or later.

I’ve created my first jQuery plugin this week – it’s an image overlay plugin (the static pic above doesn’t do the plugin justice, so click through to see it in action).

Creating a jQuery plugin isn’t that big a stretch for a competent JavaScript developer. There are quite a few tutorials out there where you can grab a template and start working very quickly. In addition to writing my plugin, I also made sure that it supported the metadata plugin, so that you can dynamically change properties on individual galleries and images, which should go a long way towards usefulness.

If you end up using this plugin, drop a line in the comments with a link so we can check out your work. Hope you enjoy!

I created a new version of my particle demo using the HTML5 <canvas>. This version is full screen, inspired by this amazing canvas demo at Iteration Six. I’d seen their demo prior to my starting to tinker with the canvas tag, but I never really tore it apart and looked inside. From what it appears, my code and their code were achieving a lot of the same things, so I decided to update mine to take advantage of some of the exciting features in their demo, including the full screen mode and the mouse interactions.

This demo uses a bit more jQuery than the previous one to handle mouse events. The canvas is much larger than the previous one, so I had to make some small changes to increase performance. Most notably, I had to halve the framerate – this demo runs at 10fps rather than 20. I sped up the particle speed so they cover distance quicker as well.

Here’s a cool particle demonstration of the HTML5 <canvas> tag. It’s a tremendously small amount of JavaScript code that is responsible for pushing some radial gradient particles around a canvas. You can check out the source code to see how things are done – it uses jQuery a bit and the demo itself uses a free color picker control.

The demo works best in Firefox. Chrome has some ugly rendering artifacts when the gradients cross over one another and Safari can’t push a lot of particles on the screen without dying, but Firefox can render several hundred particles with ease (Internet Explorer doesn’t support <canvas> at all). If the computation for this demo were to be done on a GPU rather than a CPU, you’d probably be able to pump out thousands of particles with no issues.