Enhancing web output with jQuery

In this post, John Espirian explains how a few lines of code can allow us to add a host of rich features to our web output.

(This article first appeared in the Spring 2014 edition of Communicator, the magazine of the Institute of Scientific and Technical Communicators.)

Most technical communicators are used to producing content that makes its way onto the web in some form or other. It is becoming ever more important to grasp the reader’s attention quickly, and one way to do that is by enhancing the formatting and functionality of web output.

Many of us are aware of how unappealing it can be to be presented with dreary blocks of texts, tables of data and such like. We can spruce up the content by taking some basic actions: using clear headings, writing short sentences, including visual aids, and so on.

jQuery

jQuery is a JavaScript framework

We can also improve the look and feel of web content through the intelligent use of Cascading Style Sheets (CSS). These control the visuals of a page, enabling us to use custom typefaces, make lists stand out, frame images, and make myriad other changes to the appearance of the page.

But what if we wish to enhance our output by offering some sort of interactivity? In days gone by, this would have been possible only by having a deep understanding of scripting or by being able to produce content in Flash. A better alternative would be to use a simplified means of enhancing the features available in our output. This is where jQuery comes in.

What is jQuery and why would we use it?

jQuery is a JavaScript framework: a set of pre-written code that significantly simplifies the process of producing scripts for web pages. By hiding a lot of the complexity of JavaScript, jQuery lowers the entry barrier, making code much easier to write, read and maintain. Another benefit of using jQuery over ‘vanilla’ JavaScript is the improved consistency of results across the wide variety of web browsers.

The pay-off for understanding jQuery’s simplified scripting language can be impressive. Consider that the use of jQuery can make it quick and easy for us to create and to use:

  • Navigation menus
  • Tables with sortable data
  • Slideshows
  • Image galleries
  • Audio/video players
  • Cookies.

Getting started with jQuery

jQuery is one of many JavaScript frameworks. Other well-known alternatives include Prototype and YUI, but jQuery has the largest user base and is probably the easiest to get started with.

To use jQuery on any website, we need to link to a special jQuery library file, which can either be located along with our other documents and images on a web server or can be called from a Content Delivery Network (CDN). The CDN approach usually offers a better result, because of the performance and caching gains that can be made by using a resource the browser may already have downloaded.

Adding the jQuery library to a web page

To call jQuery from a CDN, all we have to do is add a single line of code to the <head> section of our web page. Figure 1 shows a version of jQuery being called from a CDN powered by Google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Figure 1. Calling jQuery from a CDN

Adding jQuery commands to a web page

With the addition of a single line of code to call the jQuery library, we can now write some jQuery commands that will affect the content on our web page. The simplest way to do this is to place our commands directly into the <head> section of the page. It’s important that this is done after the call to the jQuery library file, as the browser won’t understand any jQuery commands until the library has been loaded. The block of code to add to the <head> is shown in Figure 2. This code is required so that the jQuery commands are executed as soon as the remainder of the page is loaded.

<script>
// This is the beginning of the jQuery code
$(function() {
// Comments begin with two forward slashes, like this
// jQuery commands are written in the blank area below
});
// This is the end of the jQuery code
</script>

Figure 2. The jQuery code block to add to the <head> section of the page

The best practice is to add comments when writing any scripting commands, to make the code easier to re-read and adjust in future; however, comments are not mandatory.

Adding jQuery commands to several web pages

The <script> block in Figure 2 will affect only the page to which it has been added. To turn the code into a reusable item, everything between the opening <script> tag and the closing </script> tag should be moved into a separate file that has a .js filename extension. This file can then be called in the <head> section of each page on which we want the jQuery commands to run. An example is shown in Figure 3.

<script src="/path/to/mycommands.js"></script>

Figure 3. Calling jQuery commands from a file

Again, this line of code must appear in the <head> section after the call to the jQuery library file.

A real example: table colouring

The example in Figure 4 shows a practical application of jQuery: with just a few lines of code, we can alternate the row colours of a table to produce a striped effect. The result displayed in a web browser is shown in Figure 5.

<!DOCTYPE html>
<html>
<head>
<title>Table striping</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// This is the beginning of the jQuery code
$(function(){
// This is the first command
// We will target all even table rows, setting the text to be red
$("tr:even").css("color","#ff0000");
// This is the second command
// We will target all odd table rows, setting the background to be yellow
$("tr:odd").css("background-color","#ffff00");
});
// This is the end of the jQuery code
</script>
</head>
<body>
<table>
<tr><td>Row 0 (even)</td></tr>
<tr><td>Row 1 (odd)</td></tr>
<tr><td>Row 2 (even)</td></tr>
<tr><td>Row 3 (odd)</td></tr>
</table>
</body>
</html>

Figure 4. A complete HTML document using jQuery to add row colours to a table

Table stripe
Figure 5. Table coloured using jQuery

To repeat the point about reusability, if we wanted to use this table-colouring effect on all our pages, we could move the block of code inside the <script>…</script> tags to a separate .js file and then refer to that .js file in the <head> section. This is analogous to the way CSS can be made specific to a single page or be used throughout an entire site.

Using jQuery in RoboHelp and other Help Authoring Tools (HATs)

As with other resources, the jQuery library file and the commands file can easily be added to a master page so that they appear in web outputs generated by HATs such as RoboHelp and Flare. In fact, any system that allows some degree of HTML control (even WordPress and other blogging services) can harness the power of jQuery.

Open-source jQuery plug-ins

Aside from it being much simpler and quicker to write than normal JavaScript, the key benefit of using jQuery is that we can call upon a vast number of pre-written plug-ins that are widely available on the web. Almost all jQuery plug-ins are created by members of the open-source community, and are, therefore, free to download and use. Rather than reinvent the wheel, it is often best and easiest to use a plug-in. The documentation that accompanies plug-ins can also provide an excellent way to understand more about how jQuery works.

A couple of examples follow that show off some of the useful features we can implement with jQuery.

jQuery plug-in: DataTables

DataTables is a perfect example of a powerful jQuery plug-in that can be set up in a matter of moments. The plug-in enables us to enhance HTML tables by adding sorting features, colour-coding and even a table-specific search field. These enhancements can be achieved through no more than a few lines of code, and several worked examples are shown on the DataTables site.

With very little effort, it’s possible to set up a DataTables-controlled table that’s often more useful than a link to download an Excel spreadsheet.

DataTables is a free download from datatables.net.

jQuery plug-in: Zebra_Cookie

Most of us know that cookies are small text files that sites use to allow some settings and user preferences to be remembered, thereby controlling the appearance and behaviour of the site. The Zebra_Cookie plug-in uses jQuery to provide an extremely simple method for writing, reading, editing and deleting cookies.

For example, I use Zebra_Cookie to enable users of a RoboHelp-generated HTML user guide to choose whether the table of contents (ToC) is hidden by default.

Zebra_Cookie is a free download from stefangabos.ro/jquery/zebra-cookie.

Finding out more about jQuery

The JavaScript source code for jQuery is freely available on the web, enabling coding enthusiasts to alter the core operation of the library and to share their work with the open-source community. The jQuery library file can be downloaded from jquery.com.

A complete repository of all supported jQuery commands, along with worked examples, can be found at api.jquery.com.

Search engines make it easy to locate useful, free jQuery plug-ins. For an excellent set of more than a thousand curated jQuery plug-ins, visit unheap.com. Several additional user interface interactions, effects and widgets are available at jqueryui.com.

References

Thanks for reading,

John Espirian

Subscribe for tips

Join 417 others on my free Espresso ☕️ email list to receive:

  • blog updates
  • free ebooks
  • discounts on consultancy
  • offers and secret stuff

🔒  No spam, I promise • privacy policy