15 Javascript Snippets

You either love Javascript or you hate it. Either way it can provide great functionality that users love. And it doesn't have to affect usability. Here are my top 15 Javascript snippits for making great sites that bit extra special.

Image Loading & Fading

Crisp photography is a sure-fire way to make a site look great, but what about the loading times of those chunky images? Give your users a nice animated loading icon, and fade the image in when it's loaded. It's a nice effect with little overhead.

http://clagnut.com/sandbox/imagefades/

Dynamic Data Tables

HTML tables are so last century. ActiveWidgets provide a dynamic data table library, allowing users to sort data by columns and highlight rows of interest. It is, however, a large overhead and not suitable for large amounts of data.

http://www.activewidgets.com/grid/

Calendar / Date Selection

Asking users to enter a valid date can be a pain - frustrating for the developer, and frustrating for the user. Offer them a simple GUI to select dates with this very customizable script.

http://www.dynarch.com/projects/calendar/

Tabbed RollBar

Tabs are great for sorting short snippets of information. Tabs without reloading the page are even better. Tabs with a rolling animation effect too? Well, that's just killer.

http://www.dynarch.com/products/dhtml-tabs/

Draggable Windows

These draggable windows are lightweight and efficient, and are perfect for intranets and web-based applications where multiple views are required simultaneously. And don't worry, you needn't have the Windows 95 look either.

http://www.brainjar.com/dhtml/windows/demo.html

Zoomable Image Thumbnails

One subject, many photos? These tidy thumbnail displays are just the ticket, allowing visitors to blow up photographs of interest. Similar to those found on eBay and such, but not as heavy on the code.

http://www.codetoad.com/dhtml_thumbnail.asp

Javascript Lightbox

A favourite little effect of mine found on many good sites these days - the Javascript Lightbox. Enlarge photographs with slick animation and easy-to-use navigation. Put a smile on the CEOs face and wow the marketing team ready for your "afternoon meeting" down the pub.

http://www.huddletogether.com/projects/lightbox2/

Drag & Drop Shopping Cart

Get your visitors from Google Search to card payment in ninja time, with a drag-and-drop shopping cart. Reducing page loads, form elements and complicated menu screens increases sales and repeat business. But with mission-critical code like this, make sure to test it on every platform before it goes live. You know this. I was just reminding you.

http://demo.script.aculo.us/shop

Form Input Autocomplete

No one likes a smartass, unless they're doing your homework for lunch money. Let this script do your users' hard work so they don't have to - autocomplete from a selection of known data. Great for street addresses (if you have the data), category selection, search engines, tagging and everything inbetween.

http://demo.script.aculo.us/ajax/autocompleter

Drag & Drop Sortable Elements

Nothing says "I love you, user" more than drag-and-drop items. Remember the days of an "order" column, and wanting to insert an item at the top? Nightmare no more! Slick interface with a very practical purpose.

http://demo.script.aculo.us/ajax/sortable_elements

Javascript Logging & Debugging

"PC Load Letter?! What the hell is PC Load Letter!!" cries from the office. Meaningless error messages are enough to drive a man crazy, so why not step up your debugging skills and hunt those bugs in style?

http://www.alistapart.com/articles/jslogging/

Font Resize Detection

After spending days getting your web site pixel perfect, inconsiderate users will always resize your text and ruin your layout. Well okay, they need to because their eyesight can't comprehend your 6pt type. Which means you need to support different font sizes without ruining your layout.

http://www.alistapart.com/articles/fontresizing/

Displaying Points & Text On Maps

If your data is geolocation based, it looks great on a map with clickable points. But how do you make that interface accessable to everyone? A List Apart shows you how.

http://www.alistapart.com/articles/cssmaps

Photo Album & Slideshow

A more advanced way of displaying your pictures - let users sort them by category, view random pictures, and even set up a personal slideshow. Probably more suitable for family pictures than commercial uses, but I've found it handy over the years.

http://www.kitykity.com/photoalbum/

Sliding Content Areas

And finally another slick animation for your site, without the overhead of Scriptaculous, create "Digg-style sliding comment boxes" for popup information.

http://firblitz.com/2007/3/6/re-how-to-create-digg-comment-style-sliding-divs-with-javascript-and-css

Well that's it from me. I hope you enjoy putting some of these into practise, and enjoy the look on your CEO/client/marketing guy's face when it goes live.