[Javascript] dynamic product display

[Chris T]

I don't think it's in any separate navigation at all.

Under the "catalog" button where it first says "Welcome to Swatch...", this
is the code they use:

===============
      <span class="mediumblack">
       <div id="IEProdDesc">Welcome to Swatch the.store. Featured below is
the new Swatch Touch family - the watch that wants to be touched! Click on
the product below to see more details and information. For other watches,
browse through the catalog to view our Swatch Originals, Skin, Irony or Beat
watches. For Bijoux, view our Category section.</div>
       <div id="NSProdDesc">Welcome to Swatch the.store. Featured below is
the new Swatch Touch family - the watch that wants to be touched! Click on
the product below to see more details and information. For other watches,
browse through the catalog to view our Swatch Originals, Skin, Irony or Beat
watches. For Bijoux, view our Category section.</div>
      </span>

===============



So it looks like they have separate versions for both IE and NN. Obviously
they're using styles to hide/show the appropriate DIV.

I haven't looked for their JavaScript yet, but I would then assume they
determine which DIV to update and pass along a string - either setting the
innerText or innerHTML properties to populate it when you click on one of
the other swatches.

That's 1 step.

Changing the image on the right is as simple as updating the .src and I'm
sure they store all the information in an array. Notice when you click on
one of the watches on the bottom it just passes along an index? Array
indexes start at 0 so that's why the first one shows
javascript:showPreviewLocal(0) in the status bar when you hover over it.

Then with the watches down on the bottom, using that same array, it'd be
pretty easy to determine which ones should show and update them.

They're not using IFrames though... It's all through DHTML from as far as I
can guess, but like I said, I didn't look at the actual JavaScript.

Chris Tifer
http://emailajoke.com



----- Original Message ----- 
From: "Grinwald, Uri" <UGrinwald at dynamic.ca>
To: "[JavaScript List]" <javascript at LaTech.edu>
Sent: Friday, June 11, 2004 2:22 PM
Subject: RE: [Javascript] dynamic product display


Yes I did in fact download the main js file and ran into all sorts of
functions.
>From what I gathered so far is (and please correct me if I am wrong) is
that  passing parameters are being passed based on the product chosen to
swap the inner.html of the id tags.

Are they using form fields, iframes or straight td wrapped in id tags
for the parts that change?.
I guess my real desire would be to decipher all that code that I need
from the code that serves other purposes as it appears rather daunting
to see all that code.

If I could be referenced to separate examples of say a navigation bar
for the products and then a separate reference for swapping text and
images, I might be able to understand a little better.

Appreciate all the responses.
Thanks guys I'll try searching again on the web.
ug

-----Original Message-----
From: Chris T [mailto:christ at saeweb.com]
Sent: Friday, June 11, 2004 11:10 AM
To: [JavaScript List]
Subject: Re: [Javascript] dynamic product display


In looking at their code, it's pretty basic. They update the image that
appears and the text displayed.

The hardest part of doing something like this is making sure your
structure is set up properly. Meaning following image naming
conventions, same-size images, etc.

Then you could write out an array of the descriptions and depending on
which one they click, update the page's display.

Have you viewed the source on that page to see how they do it?

Chris Tifer
http://emailajoke.com


----- Original Message ----- 
From: "Grinwald, Uri" <UGrinwald at dynamic.ca>
To: "[JavaScript List]" <javascript at LaTech.edu>
Sent: Friday, June 11, 2004 9:33 AM
Subject: RE: [Javascript] dynamic product display


Good Morning.

I am looking for some script samples that would allow me to display
products on a page using a small preview scroller window and on the same
page an area to load the relevant information and a large rimage of the
item selected. As an example look what swatch has doen which I think
works terrific.

http://thestore.swatch.com/cgi-bin/Store/swatch/HomePage-Navig/Intro.jsp
?affsite_id=20&category_id=72

Thanks in advance _______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript

_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript
_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript