15 Javascript Snippets
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
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.
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.
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.
And finally another slick animation for your site, without the overhead of Scriptaculous, create “Digg-style sliding comment boxes” for popup information.
