The best Web 2 jQuery javascript plugins

We developers here at Wiliam are always looking for programming solutions that are robust, standards compliant, extensible and keep our sites loading fast. One such solution that has been gaining popularity among our development team is jQuery.

jQuery is a Javascript library that aims to greatly simplify the often tedious and buggy task of writing client-side JavaScript code to for modern Web 2.0 web sites.

At Wiliam, JQuery is helping pave the way for our new generation of sites, and I personally have found that its extensible, modular platform has helped me do away with much of our old Javascript code and have all our sites work in a standardised, consistent way with fewer bugs. And best of all, it's free.

I'd like to share with you four of the best JQuery plugins that I've been working with and implementing almost every day.

jqModal - easy popup boxes

I can't remember the last time I built a web site that didn't have some kind of pop-up window. Enquiry forms, login boxes and information boxes are almost always used in our designs. I believe they improve the user experience when used appropriately: the user can request more information about a topic or log in to a site without leaving the current page, for example. jqModal is a plugin for jQuery that simplifies the task of making divs pop up. I was surprised by how little code is required, compared to our old methods. The samples on the jqModal site are simple and easy to follow - in fact I was really surprised by the tiny amount of code required to initialise and then open the popup (compared to the old <a onclick="showDiv();" etc.).

Pros: Clean and simple code and CSS with no javascript calls scattered through the page. Dimmable background. Can be modal (user must close via the specified close link)  or non-modal (click outside the box and it disappears). Works well on all browsers - even IE6.

Cons: The popup window can't be centred vertically in the browser window - you have to specify how far from the top and left the window appears. This has proven problematic with low screen resolution + large popup box - there's always a gap at the top. I've worked around this by making the jqmWindow position:absolute and top:10px.

 

jCarousel - simplified image scrolling

At Wiliam we often work on online storefront websites. The products typically have variants or several photos from different angles, and need to be displayed in a horizontal or vertical scroller. While this can be done with a fixed width div and overflow:auto, the styling options are limited as there is a big ugly browser scrollbar in the middle of the page. The more user-friendly and attractive way is to use javascript to scroll the photo strip left and right when the user clicks a left or right arrow. And this is what the jQuery plugin, jCarousel, excels at. jCarousel lets you use familiar, accessible unordered lists with images and no cluttered inline Javascript.

Pros: The HTML is just a simple unordered list with a class, which keeps your image scroller working when CSS is turned off (e.g. for mobile devices)

Cons: The images have to be a fixed width - this can leave big ugly gaps between images if you have narrow and wide thumbnails

Superfish - an accessible dropdown menu that works

Dropdown menus on web pages are an interesting thing - there are as many dropdown menu solutions as there are web sites. Everyone thinks their solution is more accessible, loads faster, looks better. For me, when deciding whether or not to use a pre-built web control, it comes down to three basic factors: accessibility, accessibility, accessibility. If the menu HTML that goes to the user or search engine is heavy (like the tables-inside-tables of the notorious ASP.NET 2 menu control), cluttered with inline Javascript, or doesn't work when Javascript is turned off, it's a no-go. I found Superfish, a jQuery plugin, to meet these requirements quite well. Some features I like from Superfish:

• The markup is simply embedded unordered lists which degrades nicely when you turn off CSS
• If you turn off Javascript the menus continue to work in IE7 and Firefox (make sure your top level menu items link somewhere like a landing page so that users can still get around in IE6 with Javascript disabled)
• I like this feature a lot - there is a built in (changeable) delay so if you accidentally move your cursor off the menu you still have about 2 seconds to move it back on - it's a bit more forgiving for most users, who lack the cat-like reflexes of us web developers
• It comes with a built-in fade effect, but personally I turn it off using $("ul.nav").superfish({speed: 1});

datePicker - handy popup date selector

Almost any form where a date needs to be entered can benefit from a date picker control. Users are comfortable with the calendar format and intuitively know how to select dates with it; calendars appear in all major online office applications.

I've recently started using datePicker for jQuery and have found it easier to use than Javascript popup calendars I have previously used. The CSS classes are more organised and easy to understand, and it has cool features like dimming dates in the view that are not part of the current month, and disabling days before today. I managed to style the popup to the designer's specifications in around an hour, and did not have to mess around trying to make it work cross-browser - it displayed in all browsers identically.

Pros: A .NET control has been written for easy implementation. There is a CSS class for every element in the calendar for easy styling. Works identically across browsers.

Cons: None found yet, but stay tuned :)

 

What are your favourites?