If you develop any type of learning content that is displayed in a mobile or traditional web browser, you should know about jQuery. jQuery is a JavaScript library that is very powerful and also extremely easy to use. In this tutorial I’ll walk you through a close look at a couple of the effects you are able to produce by incorporating just a little jQuery into your HTML code.

Obtaining the jQuery library

The jQuery library is available either by a convenient download, or you can use the libraries via jQuery’s content delivery network (CDN). Point your browser at www.jquery.com. You’ll see the download link towards the upper-left hand corner of the screen. Click on that link to reach the download page (Figure 1).


Figure 1:
The jQuery website provides the actual library and access to many free resources about the libraries

From the download page you’ll notice there are two active versions of jQuery. The 1.X versions of jQuery are older and support Microsoft’s older Internet Explorer V6 and V7. The newer 2.X versions of jQuery do not support older versions of IE. The newer versions are more optimized and have more features.

If you continue scrolling down the page you’ll notice a number of ways to obtain the jQuery libraries. We’re actually going to use the versions that are stored on the Internet. They’ll be downloaded dynamically by your browser when needed.  

You’ll see the following lines of code under the section entitled Using jQuery with a CDN. Copy these lines of code to a blank text document.

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Save your document as jQuery_examples.html.

Creating the base HTML document

Of course, jQuery runs within an HTML document, so let’s create the basic document structure around our <script> tags that load the jQuery libraries. Add the necessary code so your document now appears like this:

<!DOCTYPE html>
<head>
<title>jQuery
  Examples</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>

</body>
</html>

In order to demo a few of the cool jQuery effects we have to put some content in the <body> element of the document. You can grab some placeholder content at www.lipsum.com. This site will generate as much dummy Latin (lorem ipsum) content as you need. We’re going to add two <div>s to the body and place our content in there.

<!DOCTYPE html>
<head>
<title>jQuery Examples</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

 <body>
<div id="div1">
<p>Lorem
  ipsum dolor sit amet, consectetur adipiscing elit. Duis sed felis commodo,
  accumsan odio ut, dictum arcu. Aliquam nec sagittis sapien, vitae maximus
  arcu. Cras ac sagittis elit. Praesent in dapibus massa. Donec leo tortor,
  lacinia in nunc vel, tincidunt sagittis purus. Suspendisse posuere ut nunc id
  scelerisque. Maecenas eu diam commodo, blandit turpis ac, varius est. Sed
  faucibus urna eu neque gravida tempor. Suspendisse tincidunt metus ac mauris
  tincidunt, non ultrices turpis consequat. Pellentesque eget auctor libero.
  Etiam gravida urna non velit venenatis, ut interdum sapien rutrum. Sed
  tincidunt faucibus eros, nec congue lorem aliquet in. Integer id dignissim
  dui. Cras et dui nibh. Nam viverra, lorem at vestibulum sagittis, libero
  mauris varius nulla, ut luctus orci massa at odio. Morbi blandit mi ut lorem
  tempus, ac aliquam magna ultricies.</p>
</div>
 
<div id="div2">
<p>Lorem
  ipsum dolor sit amet, consectetur adipiscing elit. Duis sed felis commodo,
  accumsan odio ut, dictum arcu. Aliquam nec sagittis sapien, vitae maximus
  arcu. Cras ac sagittis elit. Praesent in dapibus massa. Donec leo tortor,
  lacinia in nunc vel, tincidunt sagittis purus. Suspendisse posuere ut nunc id
  scelerisque. Maecenas eu diam commodo, blandit turpis ac, varius est. Sed
  faucibus urna eu neque gravida tempor. Suspendisse tincidunt metus ac mauris
  tincidunt, non ultrices turpis consequat. Pellentesque eget auctor libero.
  Etiam gravida urna non velit venenatis, ut interdum sapien rutrum. Sed
  tincidunt faucibus eros, nec congue lorem aliquet in. Integer id dignissim
  dui. Cras et dui nibh. Nam viverra, lorem at vestibulum sagittis, libero
  mauris varius nulla, ut luctus orci massa at odio. Morbi blandit mi ut lorem
  tempus, ac aliquam magna ultricies.</p>
</div>
</body>
</html>


Figure 2:
The display of our content looks rather boring because we haven’t added any CSS code to style it yet

Save your file and load it into your browser using the File -> Open command. As you can see in Figure 2, without any CSS display, the visual is quite boring. Let’s make use of the CSS box model to change the appearance of the text blocks. In the <head> element of your document add the following style code right below the <title> tag.

<style>
   div
    {
     width: 400px;
     background-color: #b00;
     color: white;
     font-size: .7em;
     padding: 3px;
     margin-top: 10px;
     border: 1px solid black;
     }

   #div1
    {
    float:left;
    }

   #div2
    {
    float:right;
    }
 
</style>

 

This CSS is to give each div distinct boundaries. Once you’ve added the code, verify the result (Figure 3) in your browser by loading the file again into your browser by clicking File -> Open.

Figure 3: After adding CSS, the content now looks like this

Now that we have our content looking a bit more organized we can demonstrate a few jQuery tricks.

Fade In and Out with jQuery

Fading elements in and out is accomplished with jQuery’s built-in .fadeIn() and .fadeOut() methods. Now we’re going to be entering actual jQuery code, so you’re going to want to be careful as the syntax can occasionally be dense. Also note that, since we’re using the CDN to obtain the jQuery libraries, your computer must have a live Internet connection for this code to work.

Below the lines which connect you to the CDN and retrieve the jQuery libraries add the following code:

$(function()
 {
$("#div1").fadeOut("slow");
 }
);
</script>

 

Refresh your browser and you should see the div on the left fade out over a period of about a second. The jQuery we’ve written so far runs an anonymous function on page load. That function runs the .fadeOut() method on #div1. You may be wondering about the “$” symbol that appears in the script, which is just an alias for the jQuery() function.

Inside the .fadeOut() function the word slow indicates how fast we want the fade effect to occur. We can replace that with a number of milliseconds. For a very slow fade try this:

$("#div1").fadeOut(3000);

Now your div will fade out over a three-second period. (Figure 4 is the “after fade” screenshot.)


Figure 4:
One of our divs has faded away. Sad.

Many jQuery effect methods have the option of a callback function that executes once the effect is over. The callback function allows us to run effects in sequence. Let’s change the code up so the second div fades when the first div has disappeared.

<script>
$(function()
 {
  $("#div1").fadeOut(3000, function()
    {
     $("#div2").fadeOut(3000);
    });
  });
</script>

 

I think you probably see what I mean when I said the syntax is dense. There are a lot of different types of brackets in there—so be careful when you type. If you think you’ve typed it all correctly, refresh your browser and you should see the first div fade and then the second.

Slide Up and Slide Down with jQuery

The jQuery .slideUp() and .slideDown() functions work in a very similar way. In fact we can simply replace the methods in the code itself. Edit your code so it appears as follows:

<!DOCTYPE html>
<head>
<title>jQuery Examples</title>
<style>
   div
    {
     width: 400px;
     background-color: #b00;
     color: white;
     font-size: .7em;
     padding: 3px;
     margin-top: 10px;
     border: 1px solid black;
     }
   #div1
    {
     float:left;
    }
   #div2
    {
     float:right;
    }
</style>
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function()
  {
  $("#div1").slideUp(3000, function()
    {
     $("#div2").slideUp(3000);
     });
  });
</script>
</head>
 
<body>
<div id="div1">
<p>Lorem
  ipsum dolor sit amet, consectetur adipiscing elit. Duis sed felis commodo,
  accumsan odio ut, dictum arcu. Aliquam nec sagittis sapien, vitae maximus
  arcu. Cras ac sagittis elit. Praesent in dapibus massa. Donec leo tortor,
  lacinia in nunc vel, tincidunt sagittis purus. Suspendisse posuere ut nunc id
  scelerisque. Maecenas eu diam commodo, blandit turpis ac, varius est. Sed
  faucibus urna eu neque gravida tempor. Suspendisse tincidunt metus ac mauris
  tincidunt, non ultrices turpis consequat. Pellentesque eget auctor libero.
  Etiam gravida urna non velit venenatis, ut interdum sapien rutrum. Sed
  tincidunt faucibus eros, nec congue lorem aliquet in. Integer id dignissim
  dui. Cras et dui nibh. Nam viverra, lorem at vestibulum sagittis, libero
  mauris varius nulla, ut luctus orci massa at odio. Morbi blandit mi ut lorem
  tempus, ac aliquam magna ultricies.</p>
</div>

 <div id="div2">
<p>Lorem
  ipsum dolor sit amet, consectetur adipiscing elit. Duis sed felis commodo,
  accumsan odio ut, dictum arcu. Aliquam nec sagittis sapien, vitae maximus
  arcu. Cras ac sagittis elit. Praesent in dapibus massa. Donec leo tortor,
  lacinia in nunc vel, tincidunt sagittis purus. Suspendisse posuere ut nunc id
  scelerisque. Maecenas eu diam commodo, blandit turpis ac, varius est. Sed
  faucibus urna eu neque gravida tempor. Suspendisse tincidunt metus ac mauris
  tincidunt, non ultrices turpis consequat. Pellentesque eget auctor libero.
  Etiam gravida urna non velit venenatis, ut interdum sapien rutrum. Sed
  tincidunt faucibus eros, nec congue lorem aliquet in. Integer id dignissim
  dui. Cras et dui nibh. Nam viverra, lorem at vestibulum sagittis, libero
  mauris varius nulla, ut luctus orci massa at odio. Morbi blandit mi ut lorem
  tempus, ac aliquam magna ultricies.</p>
</div>
</body>
</html>

 

Run the code in your browser and watch the cool effect. First the div on the left will slide upward and then the div on the right. (Figure 5 is the “during the slide” screenshot.)


Figure 5:
The div on the left has disappeared and the second div is sliding upward in the sequence determined by the code

Now that we’ve made the divs disappear, let’s make them reappear. We’ll first add a button at the bottom of the interface. Add the following line of HTML below your opening body tag.

<button id="btnOpen">Show Divs</button><br/>
 

This of course will display a button above your divs. The button, when pressed, will cause the divs to .slideDown(). We do, of course, have to write the jQuery code to make that happen first. Add a second <script> block to your code right above the closing <body> tag.

<script>
 $("#btnOpen").click(function()
 {
 $("#div2").slideDown(3000, function()
   {
   $("#div1").slideDown(3000);
   });
 });
</script>

 

This code first attaches to the button we just created and uses the click event to key off the .slideDown() method. Once again, the events are chained one after another so they appear in sequence.

Ready for more?

Unfortunately in the space of one short tutorial we can only scratch the surface of what jQuery can do. Eye candy is just part of the power of the jQuery library. I’d encourage you to explore more for yourself. The web series QuickBytes is in the process of publishing 30 free jQuery video tutorials which will be available at https://www.youtube.com/playlist?list=PLAgylfU8wrtsQWpm3NMCpEjV5fYyrC51p.

From the Editor: Are you ready for a LOT more?

Then you want to bring your laptop to The eLearning Guild’s DevLearn 2014 next month in Las Vegas, where you can register for Mark’s October 28 all-day Pre-conference Certificate Program, “B.Y.O.L: Programming 101 for the eLearning Developer.” You can also attend his session number 305 on October 29, “Going Under the Hood of Responsive Design,” in the Responsive Design track, where you will learn how to create content that works well across an ever-increasing number of devices with a tremendous range of screen sizes and aspect ratios. Understanding how to code responsive design will give you the ability to flexibly display learning content across this range while only having to maintain a single content source.

If this whole area excites your interest, check out the entire Responsive Design Track—there’s a lot more there, whether you are a designer, a coder, a manager, or a one-person shop!