Site enhancements with jQuery

Two-sentence Description

Sites need to grow and improve to stay relevant to user’s expectations. I employed the jQuery framework to bring a number of useful features to Quadrant’s site.

Background

Over the years, I’ve implemented a number of significant changes to Quadrant’s website using the excellent jQuery javascript framework. Some of these were feature requests from management, others were projects that I knew would benefit the site in terms of performance and maintainability.

Skills and Technologies

Obviously, these enhancements relied on jQuery; specifically, the version 1.4 release. Quadrant’s site is built with server-side include files, so adding jQuery to the site was as easy as including one line of code to the header include.

To minimize the impact of adding the 24 kilobytes of code to the site’s download size, I referenced the framework from Google’s servers. Web developers are encouraged to do this so visitors’ browsers can use a cached copy of the jQuery source rather than download yet another identical version from each site they visit that employs jQuery.

  • Appearing from the right of the screen after 2 minutes, this prompt reminds visitors that help is only a click away.

    Live chat prompt – Within jQuery’s document.ready() function, track the time since the page loaded. After two minutes, I slide in an image of an operator that invites the user to click to initiate a live chat. The image and its associated link lives in a div hidden by CSS. In this way, a visitor on the page for longer than would be expected based on the average time on page (thanks, Google Analytics!) is gently prompted to seek help or ask questions.

  • Rewrite verbose and hard-to-follow javascript for hiding/showing – The site contained numerous examples of hide/show actions for floorplan descriptions and FAQ answers. This code was implemented with verbose and hard-to-follow javascript code and called via inline javascript calls with onclick. I retooled this structure with a few lines of jQuery, which improved the site by:
    • removing one external javascript file inclusion
    • replacing complex code with simpler, more maintainable jQuery
    • enabling simple animations (slide down/up, etc.) which weren’t available previously
    • ensuring browser compatibility
  • Interactive table of Move-In Ready homes – I originally set up a Google Map-based display of “Move-in Ready” homes for Quadrant’s site. After a year or so in this configuration—and with a much greater inventory of MIR homes to display—I was asked to develop a site that would “show all the MIR homes in one place.” The designer in me simply couldn’t abide a giant table full of columns of data that visitors would have to scroll both over and down. The solution was an interactive table in which home info (photo, beds/baths/garages, price, community, etc.) is sortable and filterable. View the page here.
  • User interface inprovements in HBS form – The Homebuyer Survey, or HBS, requests information from homebuyers after they’ve completed a sale. It’s mostly demographic information and it ties in with Quadrant’s referral program. The original version of the survey consisted of a daunting page with instructions to skip fields if they didn’t apply. With jQuery, I was able to easily collapse the survey to a minimum of fields and add more or populate data into existing fields based on a homebuyer’s previous entries. Additionally, a jQuery validation plug-in eliminated the hassle to the visitor when an entry they’d made was rejected by the server. Instead, validation took place as they typed, immediately alerting them to improper inputs or missing information in a required field.

Take aways

Integrating a javascript framework like jQuery (or Prototype, Ext, or others) can bring a much-needed sense of freshness to a site without requiring a significant investment.