Class 6 – In-Class Assignment

Your assignment in class today is to convert this diagram into a fully functioning XHTML/CSS/Javascript/JQuery page.

Mock e-commerce store wireframe

You hopefully realize that this assignment is identical to the class 5 assignment, except that this time, you will be writing Javascript code that takes advantage of the jQuery framework, rather than writing native Javascript as you did in the previous assignment.

When someone mouses over any of the product thumbnails, the thumbnail should disappear, and a div containing information about that product should appear.  The information div should show up as exactly the same height and width in exactly the same place where the thumbnail was on the page.

When the user then mouses out of the product info div, the info div should disappear, and the product thumbnail image for that product should reappear.

Where to start

I highly encourage you to make sure you understand all the discussion points from the class 5 page and the the class 6 page of this site.  In case you wish to refer to some more “official” documentation, here are some external links to relevant pages from the JQuery site that you may find useful (you may also find them difficult to comprehend, so take them with a grain of salt):

• How JQuery Works
• download the current version of JQuery
• documentation about the core JQuery features
• documentation about JQuery CSS-style selectors
• documentation about using JQuery to modify CSS styles
• documentation about using JQuery to handle events
• more information than you ever wanted to know about the dollar sign $()
• Getting Started with JQuery Tutorial

A hint

To approach this problem, it might be helpful to go over the high-level flow of control of the page.  Here are the steps involved in a typical scenario:

1. Your code waits for the page to load, using JQuery’s $(document).ready() method. (Maybe it would be smart to refer to the example of the ready() function on the class 6 page of this site)
2. Once the page loads, your code sets mouseover and mouseout event handlers around all the thumbnails using the mouseover() and mouseout() methods available to all extended JQuery elements…. something like this (the ids and classes used in the CSS-style selectors in your code will probably be different): $(“img.product_thumb”).mouseover() and $(“div.product_info”).mouseout()
3. These event handlers call functions that use JQuery’s show() and hide() methods of all extended elements to show and hide the corresponding images and divs.  For example $(“img#thumb1″).show() and $(“div#info1″).hide()

Related posts:

1. Class 6 – Assignment Case Study
2. Class 6 – Assignment(s)
3. Class 6 – Assignment: create a Tic-Tac-Toe game using JQuery