I was recently involved in a project where there were two multi-select lists involved, with a big number of options – around 300 in each.

These things are a usability nightmare:

• The user has to ctrl-click to select multiple options (‘where’s the central key?’)
• A stray click will unselect everything already selected (Critically important on a site sign-up form)
• They are just plain ugly

So the workarounds I’ve been trialling?

Jquery multiselect plugin – Very nice plugin that solves all three of the problems above. One problem however – it was taking over a minute for my page to load in Firefox!

Interestingly, Chrome displayed the page in under 5 seconds. Guess that new javascript engine is a fast as they say…

Half-assed Jquery solution I cobbled together for fun – This lets the user use a single click instead of a control click on multi-select lists. Solves problem one and two, problem three would still need someone with more artistic leanings working on it. Oh, and it doesn’t work in IE. Told you it was half-assed.

Current favourite option – A div with overflow hidden, full of checkboxes. Sort of solves the main problems, but still not ideal.

How would you deal with this interface problem? I’d love to hear your suggestions.

I’ve had some fun this weekend tinkering with Jquery. It’s taken me a long time to get round to playing with this library, having thrown my eggs in the Prototype / Scriptaculous basket, but after some experimentation, I wish I’d done it sooner!

I have to admit; the syntax is nicer, much simpler (no more $$(‘selector’)) and the documentation seems better. Jquery is also lightweight and fast.

To celebrate my switchover, here’s a very simple Jquery menu demonstration!

Let’s start off with the HTML:

<div id="”content”">
<ul id="”menu”">
  <li class="”starter”&gt;menu"></li>
  <li><a href="”#”">home</a></li>
  <li><a href="”#”">about us</a></li>
  <li>a href=”#”&gt;portfolio</li>
  <li><a href="”#”">contact us</a></li>
</ul>
</div>

It doesn’t get much simpler than this! An ordered list, ready for styling. Not much to see here. Here comes the javascript:

$(document).ready(function(){
  $("li:not(:first)").hide();

  $("li.starter").click(function(){
    if($("li:not(:first)").is(":visible")){
        $("li:not(:first)").fadeOut("fast");
    }else{
        $("li:not(:first)").fadeIn("fast");
    }
  })
})

Eek! Slightly more complicated. Let’s walk through it.

$(document).ready(function(){

Before we do anything, we make sure that the DOM is ready for manipulation. This has a handy side effect, when we see the next line:

$("li:not(:first)").hide();

This piece of code looks for all the ‘li’ elements in the page (disregarding the first one) and hides them, using display:none. The great thing is, since we’re doing this within $(document).ready, users with javascript switched off will still see the menu!

$("li.starter").click(function(){

This tells the browser to look out for any clicks on the li.starter element, and use the next bit of code to handle it.

if($("li:not(:first)").is(":visible")){
    $("li:not(:first)").fadeOut("fast");
}else{
    $("li:not(:first)").fadeIn("fast");
}

This part checks to see if the list items are visible, and shows them or hides them as appropriate.

You can see the full demonstration here, with comments!