As we recently began to add some Ajax components to our site, I wanted to add a QuickView ability to our product pages. For those of you not familiar with QuickView, check out the gap.com or lightingdirect.com. I couldn't find a droppable component to achieve this ability, so I began writing one myself.
My goal was to allow its reuse on multiple pages and sites, without major modification to the page. As it stands now, the only required change to the HTML of the page, setting the class attribute of the container of the product. On our site, we display 9 products per page, so the div that contains the product information is assigned the class. When the JavaScript is loaded, it finds those containers and adds the events to display the QuickView button.
The onMouseOver event for the container is the most critical. When this event is triggered, I have to find the QuickView object and tell it to render the QuickView button, and where. Also, because the onMouseOver event is inherited, I need to figure out which container triggered this event, and I cant use the srcElement or target because that will often reference children of the container.
So I came up with a shortcut. I store a reference to the QuickView object in the container using setAttribute, and then I test for the existence of that attribute to find the container. If it doesn't have the attribute, I go up the DOM tree until I find an element with the attribute, and that is the container.
I liked this because it doesn't require a global variable, making it more portable to other sites and compatible with other scripts.
It worked fine in IE. However, the official spec of setAttribute is to store string values, not objects, and in FireFox, it calls toString (which returns "[object]",) and stores the result. So in FireFox, I do use a global variable for the actual reference to the QuickView object, but I still use the existence of the attribute as an indication that I've found the container element.
Item of the Day: Traditional Bathroom Vanity - Cornerstone 129-V30 by Fairmont Designs