Sorry, Jason.

tekkie00: in all honesty, i always thought coldfusion was the shit
tekkie00: Allaire ColdFusion 4.0
tekkie00: the greatest net invention

GeekCred--;

. . .

I've been given a relatively interesting task at work that I've actually wanted to explore for some time.

When building advanced UIs using JS and CSS, you will run into several problems with <select>. The biggest problem is the inability of IE 6.x to handle floating divs over <select> elements - basically the SELECT control is one rendered by the OS, so no z-index on the floating div can get the SELECT behind your floating div.

The only hack is to manually do a visibility:hidden; on the select anytime you think a floating div may conflict, but this is not a good solution at all. In the product we're building at Mindtouch, we have a lot of floating DIVs that could really be anywhere, so a better solution has to be found.

My boss told me to try to replace the <SELECT> control with my own from CSS and JS. This is a fascinating project for a variety of reasons:

  • Replacing the <SELECT> control will free us to consistently style each item within the SELECT
  • You can input any image items as selection
  • With advanced JS, you could also pull off multiple selections (I know this is possible in SELECT right now as well, but this implementation would be far l33ter in my mind)

However, it's important that when I do this, I don't lose the accesibility of SELECT; the end goal is not changing the markup of the SELECT in any way at all.

So here's what I'm thinking (in pseudo-idea/psuedo-code to come later):

  1. Add a body.onload hook that'll load up the JS library that will do the SELECT conversions
  2. The JS lib loops through the DOM, finds all SELECT items, then hides the selects
  3. Each SELECT with its OPTIONS are read into memory; and the markup is generated (the markup I'm going to use are unordered lists
  4. Add in an INPUT hidden field that'll store the state of the item based on the selection, so the POST method will still detect the items
  5. Add in some fancy schmancy JS/CSS that will emulate the behaviour of SELECTs perfectly

The hardest part will be dealing with the usual accessibility concerns of SELECTs. Tabbing across a FORM should select the fauxSELECT; you should also be able to scroll up and down within the fauxSELECT with the arrow keys. Also, all events that are hooked onto the SELECT need to be transferred onto the

Some problems I've run into:

  • On the styling side of things; it's ridiculously hard to use LI to determine the width of the "greatest" list item when you're floating the LI items. SELECTS resize to the greatest element's size; I'm still struggling with how to deal with this.

I'll try to keep this post updated with more problems/solutions. Hopefully I can post some pseudocode and solutions to problems I ran into - I think there might be a problem if I directly release my work into the public domain (work contract, you know how it is).

Posted by roy on October 7, 2005 at 12:13 PM in Web Development | 9 Comments

Related Entries

Want to comment with Tabulas?. Please login.

Comment posted on October 8th, 2005 at 06:46 AM
The following deals with formatting form elements, semi-related but not exactly helpful. Probably makes things more difficult including position in the mix.
<a href="http://badboy.ro/articles/2005-07-23/">badboy.ro > Niceforms</a>

_
Comment posted on October 8th, 2005 at 08:30 AM
Oh, interesting. They sorta implement what I wanted with the &lt;select&gt;, except it's not so hot.

good stuff.
Comment posted on October 7th, 2005 at 04:01 PM
CF?! teehee

Anyhow, Roy, take a look at what Adobe did with these drop down menus. I think they're fabulous! They're divs, but they mimick the drop down menus so well!

<a href="http://studio.adobe.com/us/search/main.jsp" rel="nofollow">http://studio.adobe.com/us/search/main.jsp</a>

I think that's similar to what you're looking for right?
Comment posted on October 8th, 2005 at 08:30 AM
Ooh yes. Well, I don't need new dropdowns; our dropdowns are actually pretty nice! I'll actually post about the dropdowns I made for work in my next post :)
Comment posted on October 7th, 2005 at 03:36 PM
rofl. What the hell? This must surely be your most complex humour entry.
Comment posted on October 7th, 2005 at 02:19 PM
ah, i see.
Comment posted on October 8th, 2005 at 08:31 AM
do u c?
Comment posted on October 7th, 2005 at 02:14 PM
I've got to brush up on my Greek. :-)
Comment posted on October 7th, 2005 at 02:24 PM
Actually it's Latin ;)