When I originally started this blog I meant to include more code examples…

An important part of FantasyLifeGame.com is user created posts where they claim points for doing real life accomplishments. The list of accomplishments is determined by the league commishioner and the user simply selects one from the list when making their post. Originally this was done via a strandard form select. But I realized quickly that this wouldn’t work. The list could be 50 or more items and wouldn’t work well in a select.

I then tried setting the size of the select to 5, which worked better. It was easier to navigate the list and select which one you wanted. However I wanted to add a mouseover effect that would pop up a tooltip displaying more information about the option. This worked great in Firefox, but IE does not allow the onmouseover action on options.

To work around this I made a “fake” select box. In essence it looks and acts the same as a standard select, but allowed for more customization and flexibility.

First the select:

   Option 1
   Option 2
   Option 3

Just a standard div tag with some links. The hidden form field will be used later to store the actual value. Now lets style it so it looks more like a select box.

I gave each item a bottom border because longer items may wrap onto multiple lines. By giving the div a fixed height and width and setting the overflow to auto a vertical scroll bar will appear when the list gets long.

Now we just need a little javascript to set the form value.

function set_fake_select(id) {
   //turn off any active options
   var elems = document.getElementsByName("fake_select1");
   for(var i=0; i < elems.length; i++) {
      elems[i].className = "";
   }

   //mark the fake option as active
   document.getElementById("fake_select_opt" + id).className = "active";

   //store the value in the hidden form field for submission
   document.getElementById("select1").value = id;
}

That’s it. Doing this allows me to use the onmouseover event for each option. Plus I have more flexibilty is styling the select. I can do something simple like tweek the active color or something more advanced like using script.aculo.us for some cool select effect. It also wouldn’t be hard to modify this as a multiselect which wouldn’t force the user to hold down the ctrl key when making each choice - a huge pet peeve of mine.

Popularity: 11% [?]