10 jQuery scripts to improve your site’s interface

With the past years rise of web 2.0, javascript frameworks have developed and made it easy for the average webmaster to make his site more dynamic. One of those frameworks, jQuery, has become extremely popular due to its ease of use and its incredibly light weight. Following are ten jQuery scripts to improve your site’s interface.

Thickbox

Focus on some content, image or webform, through a modal window.

When to use it? When don’t want your user to leave the page and give him more informations, show a bigger version of an image, ask him informations in a form or display a login box.

Script, demo and documentation
WordPress plugin

Tabulations

Create tabbed views of content.

When to use it? When you want to save screen space, but still give quick access to the hidden information. It’s often used in widgets in WordPress premium themes.

Script, demo and documentation

Coda slider

Create a slider like the one you can see on Coda’s website.

When to use it? Just like in Coda’s case, this slider script is great to introduce a product or a service by sections. The user gets a quick overview with intuitive navigation.

Script, demo and documentation
WP Coda: A great WordPress theme that allows you to easily create a Coda-like website with WordPress.

Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded.

When to use it? To show a set of pictures of an event, or to display images of a product.

Script, demo and documentation

jTip

Tooltip solution based on jQuery, flexible and customizable.

When to use it? This script is great to give in-context information or help to user, works well in webforms to make sure that users will fill it the right way. Be careful of not overusing tooltips as they can quickly become annoying if useless.

Script, demo and documentation
WordPress plugin (not jQuery)

Stylesheet switcher

Allow your website visitors to switch styles with a single click.

When to use it? When you want to let your user chose a different font size, let them chose a different stylesheet for a mobile phone or printing,  let them chose a more contrasted version of the colours. Stylesheet switcher can be of real help to improve the accessibility of your site.

Script, demo and documentation
WordPress style switcher plugin

jQuery Accordion menu

Create a dynamic accordion menu with jQuery.

When to use it?

Script, demo and documentation
Accordion wordpress plugin

Slider Gallery

Create a sliding gallery with your images/products.

When to use it? When you want the benefits of a normal sidebar menu, but do not have the space to list all options. When you only have two levels to show in the main navigation.

Script, demo and documentation

Form Validation

Validate your forms with this jQuery plugin to avoid receiving badly filled forms.

When to use it? In almost any form, it helps your less tech-saavy users to understand what they’ve done wrong by highlighting their mistakes.

Script, demo and documentation

jGrowl

Insert unobtrusive messages in your browser, just like Growl does in Mac OSX.

When to use it? If you call your user to action but don’t want him to leave the page, this can be a good way to confirm that his action has been registered. It can be for an e-commerce site when a user adds something to his cart as well as for confirming a message having been sent.

Script, demo and documentation