Journal

JS Option Sort

15 October 2006 › 4 comments

Update: Instead of using this example, I would recommend using Cody Lindley’s solution instead. It derives from the same school of thought, but is a better overall implementation. Check it out: List/Sort Pattern for Everyone.

Option Sort: Example | Download (4 KB)

Recently I had need to present a few rapid prototypes of various ways to categorize data into one of two columns, as well as re-order items within the columns themselves. The solution that ended up being picked was a jQuery drag-and-drop one. Personally, I think that type of thing is pretty horrid, because it cannot be operated with a keyboard, and it assumes that you have the manual dexterity to use a mouse. Plus, if you are sorting through a lengthy list, it can be bothersome to only move one item at a time.

Anyway, all that to say that I had built this other possible solution and don’t want to let it go to waste, so I’m presenting it here in hopes that it serves as a good starting point for someone looking to solve a similar problem. First off, I need to thank Paul Welter for initially making the JavaScript code available for free on his own site. That being said, I slightly adapted it to make it work with XHTML 1.0 Strict, dumping the table in favor of a CSS based layout.

I also rewrote some of the JavaScript itself, to make it play nicer with Douglas Crawford’s JSlint JavaScript verifier. There were just a few unclosed and empty logical statements. I mainly changed the way that Array() and Object() were created, using array and object literal notation instead. JSlint tends to favor that as opposed to delcaring using the new keyword…

var fooBar = {};
// vs:
var fooBar = new Object();

Anyway, it doesn’t make a whole lot of difference in how the script actually works, but can be thought of as using shorthand in CSS. You do it not because it has a huge immediate impact, but the filesize saved by using best practices adds up over time. One thing I did leave in despite JSlint’s warnings is the use of i as a non-global variable name in multiple incrimented counters. It’s common practice for JavaScript and I see no harm in it…

for (var i = 0; i < fooBar.length; i++)

I chalk those instances up to being comparable with the CSS validator’s nonsensical warnings: “You have no background-color with your color.” I also included a message that appears when JavaScript is off, letting people know that they need to enable it. I have started using <ins> within <noscript> since content is technically “inserted” when JS is unavailable. It’s one of the tags suggested by the validator for XHTML 1.0 Strict, so it must be good.

So yeah, I guess that’s about all there is to it. I have tested this demo in the following browsers, and it works just fine: IE6 and 7, Safari, Camino – plus Opera and Firefox on Windows / Mac. Hopefully it proves useful to you.

Discussion + Dissension

1. #1 Tim Huegdon

   Hey, that’s pretty handy Nathan!

   Just a quick point though – you can improve your for loop a little with the following change:

   for (var i = 0, j = fooBar.length; i < j; i++)

   This basically stops the fooBar.length method call from evaluating on each iteration of the loop. Instead it happens only on the first iteration and is stored in the variable j. We then use j to do our comparison on each iteration.

   I wrote a blog post about this a little while ago. You can find it at:

   http://nefariousdesigns.co.uk/archive/2006/05/loopy/

2. #2 Nathan Smith

   Tim: Cool, thanks. I will take a look at that a little later tonight, and hopefully rewrite those instances for which it applies. I just read your article too, nice writeup there on the many different kinds of loopiness in PHP + JS.

3. #3 matthew

   Nathan, glad to see that’s not going to go to waste. Who are the main users for this? I’m still trying to get my head around what a real world application for this would be. Do you mind fleshing that out a bit? Why would someone desire to order their selection before submittal? For review?

   Great job as always bro. :)

4. #4 Nathan Smith

   Matthew: I don’t know who the main users would be, since it could be for any number of uses. You could use it to put together a to-do list. Let’s say you have a bunch of things you need to do each month, but not always in the same order. Also, you could have some things that only apply so certain months, like Christmas shopping. That might not always come in the winter though, supposing you wanted to get it done well in advance. Another possible use would be for re-arranging the order of Netflix movies. Sometimes there is one you see that you want to put at the top of the list right away. Etc, etc.

Comments closed after 2 weeks.