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

June 11, 20081 Comment
Facebook Twitter Pinterest Plusone

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

http://interface.eyecon.ro/

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/

Filed in: ProgrammingWeb Design
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (1)

Trackback URL | Comments RSS Feed

  1. Shadowfiend says:

    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.

Leave a Reply

Back to Top