Home of the Spider

Air Tub & Whirlpool Finder

It's validation of all the hard work i"ve done on the bathroom vanity finder. Building our air tub & whirlpool finder was fun. Most of my enjoyment was seeing the finder, built for vanities, work so seamlessly with air tubs.

Sure, I planned for it to work for other finders. But how often does it actually work as seamlessly as planned? Even the templating capabilities worked as advertised! I'm impressed with myself.

Now all I have to do is fix the back button on both my finders. I haven't discovered a solution I can use in my code, all the solutions I've seen so far work only with specific Ajax platforms. Thats no fun.

Firefox vs. IE: SetAttribute

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

Bathroom Vanity Finder

Let me introduce the project I've working on the last 4 weeks.

We sell lots of bathroom vanities. Customers used to browse the selection of vanities by manufacturer and then by series. This was not very helpful, as many customers were looking for vanities based on other details, such as size and style.

To solve this, I built a back-end to build these "attributes" and specify them for each vanity. A completely new front-end was built to find vanities using these attributes. Our Bathroom Vanity Finder allows you to find vanities based on whats important to you. You can add or remove attributes to filter the results to exactly what you are looking for. Want to see vanities matching 31" - 36" contemporary style in black? Just tell us, we've got twelve of 'em.

Because we used checkboxes for customers to specify attributes, we felt that there could be confusion as to what you were actually seeing. Say you selected to view double vanities, and then you added the attribute contemporary to the mix. Before you update your view, there is a disconnect between what attributes are selected are what is shown.

Thats where all the fancy Ajax comes in. When the a customer selects an attribute, the current view is automatically updated to match his selection! Its very cool. If you've ever seen endless.com, its similar to that. Hmm, me and the Amazon engineers...

The back button is completely and totally broken, but I'll be working on that in the next few days. And the entire navigation works perfectly even without Javascript. Thats because the page was built without the Ajax stuff - that was all added on later.

This is a situation where the Ajax has a real impact in improving usability. It's not Ajax for the sake of Web 2.0.

One thing is for sure. This vanity finder gives customers more power than anything currently out there for vanities.

---

Item of the Day: Above Counter Stone Basin - Fuera by Terra Acqua

Ajax in Action

I'm not much of a book reviewer. Some reviewers give ratings like 4.5. Hello! On a scale of 1-5, by its very definition you cannot give a rating of 4.5!

Anyway. I review books in a much more informal way. I base it on how many times I think to myself, "Aha!" So if the books presents the problems well, and clearly explains the solution, thats an "Aha!" moment. The more of those the better.

In this book, (Ajax in Action, in case you forgot,) I found myself doing that a lot (going "Aha!", that is.) I'm no Ajax expert, so many of the concepts and techniques were new to me. Yet they were all clearly explained, and the code very understandable. I walked away feeling like I actually learned something.

I'm not sure why the author felt the need to discuss Design Patterns and Refactoring in a book on Ajax. While both are interesting topics, they do not have any specific relationship to Ajax, and shouldn't be included here any more than they should be included in a book on, say, Visual Basic.

Also, the author seems to love showing us how to use available frameworks to accomplish tasks. As a developer, I'd like to learn how to accomplish those tasks myself, so I have an understanding of the techniques. Once I have that knowledge, I don't mind using the framework to provide that capability.

On both these issue's, the topics are discussed, but not forced onto you. It would not affect my recommendation to read this book. On a scale of 1-10, I'd give this book 10.

---

Item of the Day: Bath 8" Faucet - Immersion G-2300-C9 by Graff

Dynamic XML

is a pain in the neck. Not for any good reason either, just that when loading an XML document that doesn't end .XML, Microsoft's XMLHTTP and FireFox's CreateDocument refuse to recognize it as XML. I'm updating a form based on the current selections, so I need to have a script create the XML document. Because my site currently runs ColdFusion, the document ends in .CFM, meaning that its not parsed into a DOM document. In FireFox, I had to create an instance of DOMParse to parse the text of the XML. Thats frustrating and annoying.

On the fun side was adding the onClick events to the checkboxes at runtime, rather than hardcode them in the HTML. I've always wanted to do something like that, but never could justify the benefits. Here I did it so that the JavaScript would be completely self-contained. Otherwise, I'd just be adding additional points of failure for no benefit.

And one last thing. Setting the attribute "disabled" to false using setAttribute() doesn't work in FireFox or Opera, but works fine in IE. Maybe FireFox and Opera have it right theoretically, because the existence of the attribute is enough to disable it, but come on. If I specifically set it to false, it should be enabled.  At least removeAttribute("disabled") works cross-platform (at least the ones I tested.)

---

Item of the Day: Bathroom Medicine Cabinet - MT20D4MD by Robern