Class 6 - JavaScript Assignments Review

We spent the earlier part of today going over today's pop quiz answers and showing the class our eCommerce site with JavaScript rollovers. It looks like some people went with the Add/Remove class name technique, whereas others went with the setStyle technique.

Also, there were issues with flickering when mousing over an image and moving between product content text elements (e.g. moving your mouse between the product name and the product description) - Amos is looking into this. There are also issues with the product content "sticking," i.e. not always disappearing on mouseout.

Amos finally helped me figure out some of my page's JavaScript problems - perhaps the biggest of these was the fact that I had assigned the class name of my thumb images (class = "thumbs") to the thumb content (class = "thumbs content") as well!! Additionally, I neglected to add the left and top positions to the element itself, and accidentally added them to the element id:

var contentElId = el.id + "_content";
//alert(contentElId);
var contentEl = $(contentElId); //get the actual element, not the id
contentEl.style.left = leftPos + "px";
contentEl.style.top = topPos + "px";

The mouseout event on the content divs needs to be separated from the mouseover event, but still contained within the setThumbBehaviors function. Within the Event observed mouseout event, it should not be el.id+"_content", as you are getting the Elements by Id already for the class content:

$$('.content').each( function(el) {
var contentElId = el.id; //remove +_content