Introduction to JavaScript Fall 2009 Class 11

Introduction

This week week, I want to show you how you can make take the existing HTML on your page and make it a little bit fancier using unobtrusive JavaScript. I'll also introduce you to a couple features of Raphael that we haven't covered yet, and show you a few jQuery plugins that use unobtrusive JavaScript to add dynamic functionality to your page.

Unobtrusive JavaScript

In week 2, I talked about progressive enhancement and unobtrusive JavaScript. So far, the JavaScript we've done in class has been, for the most part, unobtrusive. However, most of what we've done wouldn't really work well without JavaScript, so it hasn't necessarily been progressive enhancement.

This week I want to show you how you can an existing site that works and add some JavaScript on top of it to make it a little bit more interactive.

More Raphael

There are also a few more Raphael functions that I'd like show you this week.

Adding images

The image function takes in 5 parameters. The first parameter is the url to the image that you'd like to add the to canvas. You can add an image from your own site (for example /images/myimage.jpg) or use an image from another site (for example ).

The second 2 parameters are the x and y coordinates where you'd like the image to be drawn on the canvas. And the final 2 parameters are the height and width of the image that you'd like to add.

Adding an image to your Raphael canvas looks like this:

  // create a new Raphael canvas
  var canvas = Raphael(100, 0, 800, 600);
  
  // create a new Raphael image located at '/images/my_image.jpg'
  // The image will be located 20 pixels from the left of the canvas (x position)
  // and 30 pixels from the top of the canvas (y position).
  // The image will be 100 pixels tall and 200 pixels wide
  var image = canvas.image('/images/my_image.jpg', 20, 30, 100, 200);

Once you have created the image you can add event handlers or animate it or do most of the things that you can do with any other Raphael elements.

Adding text

The text function takes in 3 parameters. The first 2 parameters are for the x and y position of the text. The 3rd parameter is for the the text you'd like to add to the page.

  // Add the text "Hello world!" 100 pixels from the left of the canvas
  // and 200 pixels form the top of the canvas
  var text = canvas.text(100, 200, "Hello world!");

The text that you create with Raphael starts out without much styling. If you want to change the size or font for a text element you need to use the attr or animate functions to change the font attributes for the text element. The attr function takes most CSS font rules as attributes:

  var text = canvas.text(100, 200, "Hello world!");
  
  // Set the initial font to 20px georgia
  text.attr({ font: '20px georgia' });
  
  // Animate the font to 200px
  text.animate({ font-size: "200px" }, 1000);

Just like with CSS, the user needs to have the font on their computer if you want to be able to use it in your Raphael canvas.

Examples of Unobtrusive JavaScript

Today's activity involves creating some simple unobtrusive JavaScript code. To get an idea of some of the more complex things you can do with unobtrusive JavaScript take a look at these jQuery plugins that use the existing HTML on your page to create some pretty impressive user interface enhancements.

jQuery UI Accordion

jQuery UI is a collection of user interface enhancements that work closely with jQuery. One enhancement, Accordion, allows you to take a list of HTML element and collapse them down so that only element is visible at a time. Accordion adds event handlers so that clicking the header for an element will collapse the other elements and display the one you clicked on.

For example, you might have a collection of elements that looks like this:

  <div id="accordion">
      <a href="#">First header</a>
      <div>First content</div>

      <a href="#">Second header</a>
      <div>Second content</div>
  </div> 

Each element has a header with a link and div that contains the content for that section. Once you've included the jQuery UI Accordion plugin you can collapse all sections except for the first one by finding the content container by its id ("accordion") and calling the accordion function on the jQuery collection:

 jQuery('#accordion').accordion();

The accordion plugin will look at the structure of your HTML and automatically collapse the content elements and allow you to open individual ones.

ColorBox

ColorBox is a jQuery plugin that allows you quickly create slideshows using existing HTML on your page.

To use ColorBox you need to include the ColorBox library on your page. Once it has been included you can select a group of anchor tags and call the colorbox function on them:

  // find all of the image links that have a class of 'my-images' 
  // and create a slideshow out of them
  jQuery('.my-images').colorbox();

Assume that one of the images links in your HTML was marked up like this:

 <a href="../images/image1.jpg"
    class=".my-images"   
    title="Me at Disney World">Disney World</a>

The ColorBox call I showed you before would find the anchor using the '.my-images' class. One it has found the anchor it would look at the href attribute on the anchor to find the image that should be displayed. It would also find a caption for the image using the title attribute on the link.

That's it, no special JavaScript variable, just the HTML that was already on the page. And just as important, the page would still work without JavaScript. If the user didn't have JavaScript, they could follow the link to see the image, instead of using the ColorBox.

Activity 1

For the first activity, we will take an existing HTML page and add a little of JavaScript to create some functionality that's similar to the ColorBox plugin (but not nearly as full featured or pretty). You can find the template here.

(completed version here)

Activity 2

For the second activity, we will take a similar HTML page and add some JavaScript to create another slideshow. This time, however, we will add a slideshow that uses Raphael to create an animated slideshow. You can find the template here.

(completed version here)

(completed version with preloading here)