Massless

Another CSS / Javascript experiment

While developing for a web application at work, I was asked to design a selector of the kind that exists commonly in native applications. One where multiple items can be moved from one list box to another.

I was inspired by the limitations of the <select> element to try something totally crazy for the standards-supporting browsers*, that is, not using a <select> element at all, but using only <table> elements instead.

I think the result doesn't entirely suck eggs. But being standards-minded, it only works in IE 5.5, IE 6.0, Netscape 6.2, and Mozilla 0.9.7.

This example has Mac problems, however, that resolve around the event listener. But I think they can be fixed. Currently, the listener doesn't work with MAC IE5 because, among other things, the attachEvent() and addEventListener() methods are not supported. Additionally, it looks like the listener doesn't work for any browser on Mac OS9, because I don't know the keyCode for the Apple key. (Those who want to research how to make an event listener work for all three major event models would do well to start with this article at O'Reilly.)

I haven't tested it on Linux yet.

I wouldn't be surprised to learn that other developers have had this idea as well and that I didn't research well enough to discover their efforts. But I would like to know...has anyone else found a better way to do this? Am I re-inventing the wheel?

*Standards are funny things, aren't they? We need them to be rigidly enforced and practiced and yet they need to be flexible enough to encourage innovation and creativity as well as respond to changes in technology.