Enhance Your Designs with JavaScript functionality

By   |  Stashed in Webdesign

With the web every day becoming more and more robust and websites becoming more advanced users and designers can benefit from these changes, I can feel that it wont be long until every one will initially start to ignore IE6 and start enjoying what more advanced browsers can handle.

So here I have compiled a list of what i consider to be some excellent techniques and scripts that could be used in your web designs to give them the extra finesse that they deserve. You can also stay on top of the design trends that the web throws at us designers. Most if not all area also highy customisable with css, to get the style you need.

Most are cross browser compatible but I insist that if you haven’t used jQuery or other JavaScript libraries you have a little experiment with it to see what it can do, some times that is the best way to learn new things and get a better understanding of how to improve usability of your sites.

My Favourites:

These scripts are the ones that caught my eye, as I would have an actual use for them or know exactly what i would do with them and integrate them in to a design, if there is no demo button then the demo is on the actual page. There are so many neat scripts out there these range from jQuery to Mootools but most are jQuery.

Fancy Form (Mootools) | Demo

Forms can sometimes be over looked in the styling process with this script make you forms look professional changing the appearance of how the controls are displayed.

Automatically Generate a Photo Gallery from a Directory of images (JavaScript, PHP) | Demo

Allows you to drop images in to a folder and they will be automatically added to the gallery, you could use and uploader to put them in the gallery folder either way a very nice script to save time creating galleries, only uses a tiny bit of JavaScript and uses PHP so bear that in mind.

High Slide Image Viewer (JavaScript)

Offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages

Auto-Playing Featured Content Slider (jQuery) | Demo

Display important content on an auto cycle, with roll over text and indication pointer over thumbnail.

Light Form Contact Form (Ajax, PHP) | Demo

Checks form validation as you write, and has a nice little pop up box to let you know, its also cross browser compatible. Over a very nice form it also has a spam check

jsvalidate (prototype and scriptaculous) | Demo

JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive JavaScript form validator. With minimal set up, Forms are always a pain to validate so this script helps do that based on certain classes.

Pluggable Tabs (Mootools)

Creates a animated tab system that fades from one tab to the next and displays the contents. its a nice smooth fade from each content tab.

Auto Load Content While Scrolling (jQuery) | Demo

When we are scrolling down a web page, the code recognizes that you are at the bottom and auto-loads new content. This could be used say for a large photo gallery or portfolio site.

Wizard Plugin (jQuery) | Demo

Creates a wizard style interface for your users to click through step by step, could be quite a useful pieces of script if any clients need something like this on there product site.

Unobtrusive Expand and Collapse Navigation | Demo

A vertical navigation like as in tree view that expands and collapses, it might not look very nice but that’s the beauty of css, I can see this being used in an admin panel or in a WordPress theme for those nested lists.

Facebook Like Autosuggest Search Engine (jQuery)

Cross browser auto suggest search feature, it recommends word based on what you type in to the field, in this instance it is looking a countries.

Scrollovers (JavaScript)

Another cross browser JavaScript allows some cool roll over for your links styled by css, ads a unique rotating like effect to you links. Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren’t expecting

Smooth Scroll (JavaScript) | Demo

This script allows your page to slide down the content using your html anchor tags a very small script and simple to implement, I can see this taking its place on a single page portfolio site.

Cycle (jQuery) | demo

If you like image effects you’ll love this, it has a ton of demos available showing different transitions to other images, the one that interested me the most was the ability to skip to the next and previous images see the intermediate demo

Masked Form Input (jQuery)

Coming back to forms well this masking script will only allow the user to enter data in the specified format showing a visual representation in the form field as you type

Colorpicker (jQuery)

That’s exactly what it is a Photoshop style colour picker, this would be ideal to allow your users to customise colours for certain aspects of your site.

Upload Form (JavaScript) | Demo

This upload script ques uploads and displays a success or failure symbol, the progress of uploads can also be seen on the display so you know how your upload is doing, uploads can also be cancelled, very user friendly

More Lists Of Useful JavaScript Library Functions

80+ Ajax JavaScript Solutions or Professional Coding – In this article we’d like to present a list of over 90 useful AJAX-based techniques you should always have ready to hand developing AJAX-based web-applications

7 Tutorials to Design Modern – Ideas to design an original interface for your next website project using the most popular JavaScript Frameworks such as Prototype, MooTools and Scriptaculous

300 jQuery css, Mootools and js Navigation Menus – If You are web developer great navigation menus always comes handy. I united this list for people like me, who sometimes wants to do job fast and choose from already prepared examples

75 Useful JavaScript Techniques/ – Here are 75 more handy JavaScript techniques that have made websites much sleeker and more interesting

50 Amazing jQuery Examples – Many of us have been using a good deal of jQuery plugins lately. Below I have provided a list of the 50 favourite plugins many developers use.

10 Cool jquery Plugins – A list of 10 jQuery plugins to enhance designs.

25 Ways to Improve your Site – I’ve compiled a list of what I think are 25 ways to improve your website in as little time as possible

60+ Ajax dhtml and JavaScript libraries – Ajax, DHTML and JavaScript components are important in the era of Web 2.0. Recent Web-applications tend to use them to provide more interactivity and guarantee better functionality

Exploring Design Outstanding Start Pages – Designers have only a fraction of a second to attract users’ eye and win over their loyalty. Clear visual structure, thought-out typography and moderate use of images are extremely important.

Comments

Has any one used any JavaScript Plugins that they believe are truly amazing and they would use again and again?

Do you feel Javascript now has an increasing role in web design?

Any one had any bad experineces with Javascript or any other thoughts

About the Author

Max is an avid xhtml and CSS coder but also loves to get his hands dirty with more practical design such as cutting, gluing and painting things. Visit his blog: Design Shard.

More posts by

Website

  • http://blogthememachine.com Mike Smith

    Nice list. I’ll be using a couple of these for a new site I’m working on. Good guest post Max!

    Mike Smith’s last post was… Listing WordPress Pages Multiple Levels Deep

  • http://styl.eti.me styletime

    Some great stuff there I’ve never come across before, Thanks!

    btw What’s this “Javascript” you keep talking about ;)

    styletime’s last post was… Share your design link’s…

  • http://designshard.com Max | Design Shard

    @ Mike Smith – Yea some useful stuff, im liking the smooth scroll

    @styletime – Javascript – ” A cross platform scripting language commonly used in web pages to create dynamic content” this will explain better http://en.wikipedia.org/wiki/JavaScript

    Max | Design Shard’s last post was… Poll: Cast your vote : What interests you most in design?

  • http://designshard.com Max Stanworth

    @ Mike Smith – Yea im liking facy forms and smooth page scroll at the minute

    @ Styletime – Javascript – “Cross platform scripting language commonly used in web pages to create dynamic content”

    This may expalin better : http://en.wikipedia.org/wiki/JavaScript

  • http://www.myinkblog.com Andrew Houle

    @Max Thanks so much for the guest post! This is a fantastic list, I’ll definitely be using this bookmarking this for reference :)

  • http://naldzgraphics.com NaldzGraphics

    great post Max.its useful.thanks

    Ronald

    NaldzGraphics’s last post was… Create a Billiard Balls in Photoshop

  • http://designshard.com Max Stanworth

    @ Mike Smith – Thanks, yea im loving smooth page scroll at the minute

    @ Syletime – Thanks, this will probably explain better than me http://en.wikipedia.org/wiki/JavaScript

    @ Andrew – No problem, really enjoyable found some really cool javascript hehe

    @ NaldGraphics – No problem, some good stuff on here.

  • http://www.1stwebdesigner.com Dainis Graveris

    Max, thanks for pointing to one of my articles too. You’ve done pretty good work here!! Many links for me to check out!

  • http://www.thejimgaudet.com/blog Jim Gaudet

    Nice list. Adding this to my stumble favorites.

    ~ Jim

  • http://techbranch.com sTm

    Dude,
    I agree those scripts really make the page come alive and not so boring. I always try and add some type of imagery or moving content in all my web designs. Otherwise the page will kind of look dead. Many scripts give you options to just drop in new pictures that continues to keep the site looking fresh with out a redesign.

  • http://www.invisiblewindow.com Hank Pantier

    Hey thanks for listing our JQuery plugin blog post on your blog!

    Hank Pantier´s last post was… New Site Designs Launches

  • http://mcarthurgfx.com Sean McArthur

    Thanks for showcasing my Tabs plugin!

    Sean McArthur´s last post was… Cross-browser addEvent Function without Frameworks

  • http://www.invisiblewindow.com Hank

    hey man thanks for linking to my site, web development with Invisible Window.

    Hank´s last post was… Digital Photography

  • http://tipebook.com/blog aminbeb

    wow!!! thanks for the info! its a very good info!

  • http://www.flowernames.net Flower Names

    I am going to have to sign up to receive your feed. This is good stuff.

  • http://abstract2collective.blogspot.com/ Amber

    It’s really sad, to go googling right now looking for updated cross browser examples for menus etc. – most of the sites I came across were linked to site examples that had been removed (out dated) or 404′d.

    I ended up typing 2008 with my keyword and found this post. Thanks for more current resources!

    Amber´s last post was… Curb Your Cravings – Not Your Enthusiasm