Want to get right to it?
I understand...go and play
Can I use this code?
Sure. In fact, please feel free to improve on it
. It's a free web. Just View Source, baby. Copying this text and this brief description and pretending that it's your experiment is a no-no, though. No identity-hijacking allowed, thanks.
Had to do this for work. At first, I was making list boxes from <select> HTML elements. You can see an early (broken) attempt here
With an increasing amount of data, the UI was becoming less useful for the user. Limitations included:
- No easy way to make columns within the list box.
- Hard to tell what items were just swapped.
- It was difficult for developers to constrain the width of the list box.
Decided to try and take advantage of overflow in CSS2. The "list boxes" are <table> elements that overflow their specified CSS height and width, directing the browser to generate the scroll bars.
What remains to be added: concatenation of the values of each row in the "list box" into hidden form fields and then POST submission.
This example only works in its entirety on IE 5.5, IE 6.0, Netscape 6.2, and Mozilla 0.9.7+ for Windows. The overflow works for MAC IE 5.0 and 5.1 but there are serious Mac problems, however, that resolve around the event listener. But, I think (hope) 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 will keep updating this code until I can get some version working for browsers on the Mac platform. (As well as for Linux which I haven't tested yet.)
-I should've probably just slept instead. -Chris