RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


JavaScript and jQuery: Web Apps as Highly Interactive as Desktop Apps

Use the advanced CSS features of JavaScript and jQuery to create web applications that behave and look like desktop applications, fueled by drag-and-drop, mouse selection, panning, zooming, and more.

odern browsers have greatly improved their performances, development tools, and compatibility. Even though most web sites still adhere to the page paradigm, rendering their content as it would appear in a newspaper or book, browsers can support highly interactive applications that rival traditional desktop apps.

Historically, developers who wanted to support complex or highly visual application interactions had to choose between desktop applications that were local to the user's PC and ones built on top of browser plugins like Flash. Today, JavaScript has advanced enough to support this class of applications as well. Powerful JavaScript libraries provide abstractions from browser incompatibilities and low-level implementation details. They make designing interfaces that behave in a way familiar to the user (for example, drag-and-drop, selection and repositioning of visual items, panning, zooming, mouse gestures, and so on) simple.

This article demonstrates how to leverage this power using JavaScript and jQuery to deliver a new class of web applications. jQuery is the popular JavaScript library that abstracts away browser incompatibilities and offers a programmer-friendly interface based on CSS selectors and methods chaining. Included with the article are an example that mimics a full-featured desktop application (see this YouTube video) and the full source code.

For an explanation of the benefits of choosing JavaScript as a foundation for your web applications, see my previous DevX article.

jQuery in a Nutshell

To use jQuery in your web applications, you need only include one JavaScript file in your HTML code. You can then manipulate the Document Object Model (DOM), use CSS selectors to identify parts of the page that you want to affect, and apply mutator methods that modify all the matching elements. The following listing is a basic example that changes the background color of the first paragraph of a web page.

  <script src="lib/jquery-1.2.6.js" ></script>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
    $(document).ready(function() {
      $('p:first').css('background-color', 'yellow');

The $() function is a handy shortcut to trigger jQuery-driven manipulations. The above listing uses it twice. First, it's used to bind an anonymous function to the document.ready() event. This is how the code triggers the execution of jQuery code once the page has finished loading. Then it's used along with the p:first CSS selector to isolate the first paragraph. The css() mutator method changes its background color.

jQuery offers many more methods to transform the DOM and bind callbacks to all possible browser events. Refer to this introductory article if you want to explore jQuery in greater detail.

jQuery is highly extensible and, for the purposes of this article, the example uses two additions to the bare library: jQuery UI, a set of specialized functions to deal with visual interactions, and the mousewheel plugin, which allows an app to react to scrolling events generated by the mouse wheel.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date