jQuery for added enhancements

Posted June 18th, 2009

jQuery LogoI thought I would write a little post about how jQuery can be used for little usability enhancements and effects.  Now I would never recommend using jQuery without some prior Javascript knowledge but you can definitely jump right into jQuery if you want.  I was fortunate enough to learn enough Javascript over the past year (see DOM Scripting by Jeremy Keith) where I have really been able to use jQuery to its full potential.  For those of you that don’t know jQuery is a Javascript library that takes out a lot of the tedious coding that is required in Javascript.  The packed version is only 19kb so the added functionality is definitely worth it.  Now onto some examples.

One of our most recent clients, MVP Software Inc., wanted to make use of some scrolling and fading elements.  Now a year ago I would have used some simple flash elements.  I know now that this is just overkill.  Using jQuery and the InnerFade plugin we were able to successfully rotate the client testimonials (RANDOMLY)  in the header (see the header on any page) and rotate the images on all the module pages (see rotating images here).

Another example would be the simple reveal that is used here for our FAQs for one of our clients.  We cannot disclose who this is for but look at this simple function.

$(“h3″).click(function () {
if($(this).next(‘div’).is(“:hidden”)) {
$(this).next(‘div’).slideDown(“slow”);
}else {
$(this).next(‘div’).slideUp(“slow”);
}
});

This simple function basically will reveal the div following immediately after the h3 that is clicked. Once revealed, clicking the h3 again will slide it up and hide it. This makes things very easy if you have the answer wrapped in a div following the h3 that is your question. Now you must make sure the initially hide those div’s in the css but this function would require a ton more code to do strictly in Javascript with using jQuery. This just makes things a lot easier to digest and to code. See the basic reveal in action. UPDATED: 11/2009 for proper graceful degradation.  If Javascript is disabled the answer will automatically display.

These are just some basic enhancements to websites that are not really necessary but do add a nice touch.  Do I think jQuery is necessary in every project? No.  But do I think jQuery can make your life a lot easier when adding simple behavior details to web projects? ABSOLUTELY.

This entry was posted on Thursday, June 18th, 2009 at 11:33 am and is filed under Usability, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “jQuery for added enhancements”

  1. Lee Gustin Says:
    November 2nd, 2009 at 1:51 pm

    Great post. I have slowly been getting into jQuery in my designs, and this is one easy bit of code that I will make sure to use somehow.

    Thanks

Leave a Reply