Patagonia Web Version 2.0

http://www.patagonia.com/

Home Page
I wrote all the JavaScript used on this home page from scratch, and I also saved all the images for the main nav bar, the second level nav bar, and all the roll-overs.

This is a static version of the home page I saved from the Patagonia Web Version 2.0 site, but the javascript it all functional. Try out:

• The second-level navigation swapping (note the URLs for the second level images change depending on which first-level category is selected)
• The random image (selected from eight) that appears on the left side of the page, along with its caption. Reload a few times to see a different image.

Product Page
There is extensive JavaScript on the product page on the Patagonia version 2.0 site. I wrote all of it from scratch. I also created the HTML template for this page which involved solving a Netscape rendering bug by changing what is considered the "background" color. (When Netscape renders a table of width="100%", fixed-width table cells of, say, 1 pixel do not stay fixed width if the browser is at all wide. Instead, as the browser window is stretched, the table widths are stretched, even if they are supposed to be fixed. This threw the rendering of the whole layout off, so I made it a fixed-width page, changed the backgound color to light grey (so the right column would blend in naturally) and added a white-backgrounded table around the footer to give the impression that the page background was actually white. Problem solved.)

This is a static version of the product page saved from the Patagonia site. Try:

• Clicking on a color swatch to see the item in different colors (note the selected color in the drop-down menu also changes)
• Selecting a color from the drop-down menu to see the item in a different color
• Clicking the blue left and right arrows to scroll the thumbnail images of different items
• Clicking on the little box indicators to scroll the thumbnail images
• Clicking on the product image or the 'Larger View' text to see a larger view pop-up window of the item in the currently selected color
• Selecting different size/color combinations to see the back-ordered and out-of-stock messages when 'add to my bag' is clicked (hint: select different sizes in the color 'Light Indigo Heather (884)' to see the different responses)