Recently me and my colleague Johan Ahlin have been on the hunt for jQuery plugins that enable styling of HTML elements that are normally hard to style, such as dropdowns. The most recent example was a slider where the visitor is able to select a value on a scale by dragging a handle. This clearly maps to an ordinary list of radio buttons. We have found a lot of slider plugins but almost all of them expects the values that the user can select between with the slider as javascript parameters. Similarly for dropdown plugins most expects to find the values for the dropdown in an unordered list element. In my humble but ranting opinion its obvious that the source for the values should be a regular dropdown.

So, my question is this: there is a lot of talk about progressive enhancement among UI developers, but where is it? It might mean slightly more code to make a dropdown plugin that transforms a SELECT element instead of a UL element but doing so means that the function will work for visitors that don’t have javascript and for the visually impaired. Doing so also means that the markup is semantically correct and that the server code developers are able to ignore the UI code and just render, and save input from, ordinary HTML elements.

Anyhow, here are two great plugins that we have found for dropdowns and sliders that actually does progressive enhancement. Kudos to their developers!

jQuery UI Slider by Wilfred Nas

Stylish Select Box by Scott Darby

PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.