roy

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).