5 minute read.

Pushing the boundaries of web design. The ultimate user interface.

Paul Anthony / June 11, 2008

Posted in: Archive

Designers by nature love to change things. If they aren’t dropping caps to suit a design, they are trying to push the boundaries of what the browser can do. I’ve recently been involved in a project that has needed some different looks for standard user interface elements such as forms. While I wouldn’t normally condone such activity (from a usability point of view, its a bad idea to change standard UI elements) sometimes graphic designers need “appeased.” (read “shut up”). If you are looking how to go about changing your standard forms and interface to be a bit different you’ve come to the right place.

JQuery related

I looooove jquery. It seems when you have a project that needs some major javascript bits and bobs, Jquery is a one stop shop. With the wealth of developers out there, you will be hard pushed to find a library that has as many plugins.



JNice takes us to a fancy form, with fancy dropdowns. This is where the majority of the Jquery legwork has been done, with styles dynamically attached for the other form elements.

Load Content While Scrolling


Demo: http://www.webresourcesdepot.com/dnspinger/

If you ever wondered how DZone or WikiSearch manage to allow continuous scrolling, then this is the snippet of Jquery for you.

Interface Elements for JQuery


Demo Page: http://interface.eyecon.ro/demos/?page=demos

Interface Elements is to jQuery, as Script.aculo.us is to Prototype. Using this set of UI elements can bring you no end of rich interface joy. Implements Draggables, Lightbox amongst others.

SuckerFish Dropdowns with JQuery


Everyone knows what a suckerFish dropdown is? No? Head over to Alistapart and do some background reading. When you are done, come back here and see what its like when you replicate the same thing with JQuery. Its pretty darn lovely.

JQuery Validation on steriods.


Ok, so its not exactly a part of the user interface, but you are going to need some way to tell when your input data is wrong. And hey – it has a built in AJAX captcha. So no more nasty bots ruining your forms.

JQuery scrollTo


Sometimes, you are going to want to scroll either the page, or elements within your page. So this is where JQuery’s scrollTo plugin comes in. See I told you you’d like JQuery.



Need an area of your site to scroll independant of the main scrollbars? No problem, JScrollpane is the perfect solution, just add a small snip of Jscript and add your images. It also allows external links (outside the pane) to control the scrolling. i.e. if you need to implement Anchored positions within your content pane.



I do have a list of other accordion solutions further down the article, but this one is my favourite so far. It rocks the boat.

Coda Popup Bubbles.


I really like this effect, and it truely shows off the beauty of JQuery. Best of all, unlike something like Lightbox, it’s not over used. For popups that go “puff”.

Pretty Forms

Forms have long been a pain in the rear for web developers, both from a positioning point of view, and from a styling point of view. Do we position with tables, definition lists, labels or plain old Div’s? Anyway the positioning is for another day, how do we go about changing the styles of some form elements?

Some Overall alternative form samples




If you need customised checkboxes, then you’ll need some neat javascript to do so.. When the page is loaded a JavaScript will scan the page for checkboxes and hide them and place an image on the same position.

If behaviourially you need your checkboxes to change, and yet you want to maintain their functionality, then this link is for you, allowing you to select say only two checkboxes in a group etc.


Scrollable Checklists

An alternative to the select element with enabled multiple attribute.


Select Elements

An alternative to a select element, this would make an easy “jump-to” menu, or could be easily ammended to create actual selected item functionality.


Rounded Input Boxes

If you like your OSX style boxes, then this is the badboy for you.


Describes a simple rounded corner technique for input boxes.


Again based closely on the Mac OS input style.


Note: I also found that (<input type=”search name=”blah value=”Search“/>) is another MacOs safari only rounded corner solution. Great if you only want the Mac fanboys to see it.

Ajax Autocomplete Boxes

Input Autocomplete Boxes

As seen on Google suggest etc.




This guy lives, breathes and sleeps JQuery. His name is Jörn Zaefferer and he is the man. We the development community bow to you.


Combo Autocomplete


Sexy Accordions

Not one of these.

Cross browser accordion, created with scriptaculous.


Or if you prefer something more lightweight – a moo.fx equivalent.


If you like Apple’s site, then you are going to love these drawers. This is a JQuery Accordion that replicates the menu.


  • cms
  • css
  • Design
  • E-commerce
  • elements
  • forms
  • interface
  • javascript
  • jquery
  • learning
  • wikisearch