Pushing the boundaries of web design. The ultimate user interface.
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
http://www.whitespace-creative.com/jquery/jNice/
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
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
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
http://be.twixt.us/jquery/suckerFish.php
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.
http://bassistance.de/2008/01/30/jquery-validation-plugin-overview/
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
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
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.
JScrollPane
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
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.
Accordion
http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
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.
http://jqueryfordesigners.com/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
http://www.badboy.ro/assets/articles/niceforms/niceforms.html
http://www.agavegroup.com/?p=35
Checkboxes
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.
http://brainerror.net/media/scripts/js/checkbox2/demo.html
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.
http://www.mattkruse.com/javascript/checkboxgroup/index.html
Scrollable Checklists
An alternative to the select element with enabled multiple attribute.
http://c82.net/posts.php?id=25
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.
http://ayozone.org/2008/02/06/drop-down-menu-with-jquery/
Rounded Input Boxes
If you like your OSX style boxes, then this is the badboy for you.
http://www.brandspankingnew.net/archive/2005/08/adding_an_os_x.html
Describes a simple rounded corner technique for input boxes.
http://pupungbp.erastica.com/wp-content/uploads/2007/07/round-corner1.html
Again based closely on the Mac OS input style.
http://www.picment.com/articles/css/funwithforms/
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.
http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html
http://www.jimroos.com/2007/05/ajax-autocomplete.html
http://fromvega.com/wordpress/2007/05/05/auto-complete-field-with-jquery-json-php/
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.
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Combo Autocomplete
http://www.dhtmlx.com/docs/products/dhtmlxCombo/index.shtml
Sexy Accordions
Not one of these.
Cross browser accordion, created with scriptaculous.
http://stickmanlabs.com/accordion/
Or if you prefer something more lightweight – a moo.fx equivalent.
http://www.nyokiglitter.com/tutorials/horizontal.html
If you like Apple’s site, then you are going to love these drawers. This is a JQuery Accordion that replicates the menu.
http://jqueryfordesigners.com/slide-out-and-drawer-effect/
You might also enjoy..
Filed in: Programming • Web Design
About the Author (Author Profile)
Paul is a regular 28 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.Subscribe
If you enjoyed this article, subscribe to receive more just like it.
I’ve always preferred the method for checkboxes that involves hiding the checkbox itself using CSS, giving its accompanying label some left padding, and then giving it a background image. It’s *almost* a JS-free solution, only because there’s no way to select down and then back up the DOM tree in CSS, you need JS to set a class on the label or the containing element of the checkbox and label when the checkbox is checked.
I say this is because you can’t select down and then back up because if you could say `input[type=checkbox][checked=checked]:parent …’, then the JS wouldn’t be needed, as the wrapping element could be styled appropriately.
Although, now that I think of it, `input[checked=checked] + label’ should work on non-IE browsers… Need to play with that at some point.