Sorting by Shape or Color

Let's put this all together and do something a bit more interesting. We are going to make a page of images that can be sorted by shape or color. To complete the following demonstration, you will need between 15 and 25 images. The demonstration uses 25 images -- five different shapes in five different colors. Below is the master image that was sliced up into individual images. For the sake of clarity, the individual images were named for both shape and color, like this:

• star_grey.gif, spiral_grey.gif, sq_grey.gif, etc.
• star_gold.gif, spiral_gold.gif, sq_gold.gif, etc.
• star_green.gif, spiral_green.gif, sq_green.gif, etc.

Store the individual images in the assets folder.

The final page will place all the images into a fluid grid. Above them will be buttons for sorting options. The images can be sorted by shape or by color.

When a button is pressed, all images described by the sort option will display, and everything else will be suppressed. The correct images will slide to the top. The sort option will be highlighted.

We will also include an "All" option so the user can undo the sort.

You can play with the demonstration file here: m12_sort.html

First the HTML. The HTML is not particularly complex; in essence, it is two wrapped lists. Duplicate your template page and name the new page "m12_sort.html."

Below the script tag that pulls in the html5shim.js file, add a script tag to the head of the document. Point the src attribute at the jquery.js file in the js folder.

Add a div to the body tag. Give the div an id of "container." Inside container, add a header tag, a second div with id "content," and a footer tag:

<div id="container">
     <header>

     </header>
     <div id="content">

     </div>
     <footer></footer> 
</div>

To the header tag, add an h1 with an appropriate page title. Below it, add a div with the id "filters." Inside the div, nest an unordered list of all the possible sort filters -- be sure to include an "all" option. Wrap the contents of the li tag in an a tag. Give each a tag a unique id named for the shape or color it represents, like this:

In the content div, add a second unordered list. Place an image tag inside each one and pull in all your images. To the li, add a class attribute. Add two classes to the attribute: the color and the shape. It doesn't matter what order the class names are in, just be sure that there are two of them and that they are separated by a single space. If you named your images well, for the color and the shape, this step will be easy.

Here is the completed HTML:

continued in next session...