javascript help

[halo]

Does anyone know how I can get the product information (Lens, Frame, Part#, Price) to the left of the full-size image to change like the image does itself when you click on the swatch?
http://www.chaparral-racing.com/OAK/oakley-2.htm

Also, Is this the best way to go about this? It seems to take about 8-10 seconds to preload those images, but some of the pages are going to need 2-3 times as many color combinations. If the images aren't preloaded, the effect is lost because it takes a while for the full-size images to load. Is there any way to have the first image appear while the other images are loading?

[Vincent Puglia]

Hi halo,

The way the page is currently written, you cannot change the product info. You would need to make it all a div layer, then swap the data with the same event handler as is used for the swatch.
Start off by putting the data into an array
then rewrite your div layers as needed from the array.

Vinny


------------------
my site:GrassBlade: cut&paste javascript
moderator at:The JavaScript Place Forums
Javascript City

[halo]

I fixed the <div> tags... they didn't even need to be there. What is it, exactly, that needs to be in one layer... or is it ok now?

What should the arrays look like? I posted the url below so you can take a look... I don't know too much about javascript, so a little more explanation would be very helpful... I'm also not sure how to use the document.write function, and I assume that's what I'll need for the product information
http://www.geocities.com/halo.geo/chap/oakley-3a.htm

[wimpypenguin]

using document.write to update the product info isnt the best way to go...document.write will actually take everything on your page, delete it, and then output whatever you wanted to write...unless it is called from within a table.
the only two ways i can think to do what you want is either to make all the product info text into a .gif and change that along with the sunglasses when they are clicked...but like you said you could lose the instant switch effect...definetely on slower connections.
OR you could use a form, and have a text box for each category of the products info (price, part num, etc) this way would be much faster...if you need more help send me an email...i'll be happy to offer some assistance.

[halo]

wimpypenguin - That must be why I couldn't find any example scripts that changed text. I won't lose the effect, but using gifs would add 1k for every color combo... which for this page would mean about 5 more seconds of preloading. Plus, it wouldn't be as easy to change.

I already have 58k worth of images on the page... though most of the pages will have only 5-7 colors... so that'd be around 35k without gifs, 40+ with them. After adding a top navigation bar (10-15k), a side one (text), and other text, do you think that'd be too much? Sorry for rambling off-topic, I'm just trying to think it through.

If you could post an explanation of how to do the text boxes, that'd be great.

[halo]

I figured out how to change two different images, one for the main image and one for the product info. I'd still like to see how the text boxes work, though.

[This message has been edited by halo (edited August 01, 2000).]

[Vincent Puglia]

Hi halo,

The following is an example only. You'll have to clean it up.

var arrGlasses = new Array();
arrGlasses[0] = "lens1|partNo1|frames1|price1";
arrGlasses[1] = "lens2|partNo2|frames2|price2";

function writeLayer(divID, swatchNo)
{

tmpArray = arrGlasses[swatchNo].split("|");
for (i = 0; i < tmpArray.length ; i++)
{
switch (i)
{
case 0: txt = 'Lens: '; break;
case 1: txt = 'Part #: '; break;
case 2: txt = 'Frames: '; break;
case 3: txt = 'Price: '; break;

}
if (document.all)
document.all[divID].innerHTML += txt + tmpArray[i] + "<br>";
else
divtxt += txt + tmpArray[i] + "<br>";

if (document.layers)
{
document.layers[divID].open()
document.layers[divID].document.write(divtxt);
document.layers[divID].close();
}
}

If you have some questions, see the "dHTML: an Introduction" script at my site.

Vinny

------------------
my site:GrassBlade: cut&paste javascript
moderator at:The JavaScript Place Forums
Javascript City

[halo]

Vinny,

Thanks, but unfortunately I've been trying to figure out how this works and I haven't. Is there more to it? I guess I need more detail, including how the info text and main image will be arranged (and "called")

[This message has been edited by halo (edited August 02, 2000).]

[Vincent Puglia]

Hi Halo,

You would call the function in the same call as you use to change the glasses. The text layout, etc depends on you, but you could use approximately the same layout.
Do you know how to code? Or, are you looking for a complete script, design layout? (The design people are salivating
Vinny


------------------
my site:GrassBlade: cut&paste javascript
moderator at:The JavaScript Place Forums
Javascript City

[halo]

I'm not an expert coder, but I know enough. The javascript is what I'm having trouble with. I've used a few scripts, but I haven't worked with anything like you posted.

I used the two-image method and it seems to take about 35 seconds to load all the images (15-20 for the page to fill). http://www.geocities.com/halo.geo/chap/minute.htm

[halo]

Actually, It really shouldn't take 35 seconds with only 42k worth of images. Yahoo/Geocities slows it down.

[This message has been edited by halo (edited August 03, 2000).]

[wimpypenguin]

Looks nice, Halo It must have been a pain to get the image dimensions for all the different sunglasses exact. One thing I noticed is the product description .gifs are kind of choppy...the images themselves are fine, but they are stretched out beyond their normal size after the onclick event...when you preload them, try to pass the dimensions for each one...
Image18 = new Image(122,80)
Image18.src = "04-090-info.gif"

but you probably knew that...

[halo]

<BLOCKQUOTE><font size="1" face="Verdana, Arial">quote/font><HR>Originally posted by Vincent Puglia:
You would call the function in the same call as you use to change the glasses.
<HR></BLOCKQUOTE>

Vinny, how would I do that, though? All the variables in the array (along with the cases)have me confused. I don't know how to get the Frame, Lens, etc to show up at all. It's so different from the simple scripts I've used...

[Vincent Puglia]

Hi Halo,

What follows below is something I'm working on currently. It doesn't use &lt;div&gt;ed layers and it writes more than one row of data (the for loop), but that's immaterial. The concept is the same. The code is called from within the HTML page with a simple function call (&lt;script&gt;writeDetails()&lt;/script&gt; ). In your case, you would call it with the onClick event handler you use now. You simply place the new code after the original.
Regarding the case statements: they are there so that the data label (frame,lens,etc) is automatically selected. If you don't want to use them, you can shift your table from vertical to horizontal and simply print the labels on the HTML page and the actual data underneath them in a div.
Finally, you would be using the document.all & document.layers DOMs/write()s (again, the concept is the same).


<BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
var prodInfo = new Array();
prodInfo[0] = "Marquez, Gabriel Garcia|Cien Anos de Solidad|13.95";
prodInfo[1] = "Faulkner, William|Sound and the Fury|12.95";
prodInfo[2] = "Tolkien, J.R.|Lord of the Rings Trilogy|37.95";
prodInfo[3] = "Flanagan, David|Javascript the Definitive Guide|39.95";
....etc...

function writeDetails()
{
var col1 = "&lt;tr&gt;&lt;td valign='top' width='1%' bgcolor='#EEEEFF'&gt;";
col1 += "&lt;input type='checkbox' value=" ;

for (i = 0; i &lt; prodInfo.length; i++)
{
tmpArray = prodInfo[i].split("|");
document.write(col1 + i + "&gt;&lt;/td&gt;");
for (j = 0; j &lt; tmpArray.length; j++)
document.write("&lt;td valign='top' bgcolor='#EEEEFF'&gt;" + tmpArray[j] + "&lt;/td&gt;");
document.write("&lt;/tr&gt;");
}
}
[/code]


Vinny

------------------
my site:GrassBlade: cut&paste javascript
moderator at:The JavaScript Place Forums
Javascript City

[Vincent Puglia]

Hi Halo,

Here's the code you need. (I didn't test with Netscape, but it should run ok.) Note: you probably have to change the array so that it matches the swatches. I wasn't sure of what belongs to what. Also, I didn't know what you wanted the normal & picture sources for. Finally, I have no idea why you have those blank image source tags.
Your current bill runs:
1) go through the javascript primer at www.htmlgoodies.com
2) buy a javascript book (beginners --&gt; SAM's Javascript in 24 hours; advanced --&gt; Goodman's Javascript Bible and/or O'Reilly's Javascript: the Definitive Guide.

Place this in the header section; alongside the swap function.

<BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
/*------------------------------------------------------------
Each dataOakley cell contains the following (in order)
separated by a "|"

dataOakley[x] = "normalPic|pic|frame|lens|part|price"
--------------------------------------------------------------*/

var dataOakley = new Array();
dataOakley[0] = "| |24K|24K Iridium|704-122|$325.00"
dataOakley[1] = "04-080.gif|04-080.jpg|Tortoise|Gold Iridium|704-080|$90.00"
dataOakley[2] = "04-081.gif|04-081.jpg|Black|Black Iridium|704-081|$90.00"
dataOakley[3] = "04-082.gif|04-082.jpg|FMJ Platinum|Gold Iridium|704-082|$125.00"
dataOakley[4] = "04-083.gif|04-083.jpg|FMJ Electric Violet|Black Iridium|704-083|$90.00"
dataOakley[5] = "04-085.gif|04-085.jpg|Metallic Black|Black Iridium Polarized|704-085|$90.00"
dataOakley[6] = "04-086.gif|04-086.jpg|FMJ 5.56|Black Iridium|704-086|$125.00"
dataOakley[7] = "04-087.gif|04-087.jpg|Rootbeer|Gold Iridium|704-087|$90.00"


function writeDiv(divID, swatchNo)
{
var divTxt = "";
var tmpArray;
tmpArray = dataOakley[swatchNo].split("|");

divTxt = "&lt;TABLE border=0 cellPadding=0 cellSpacing=0 width='100%'&gt;";
divTxt += "&lt;TR&gt;&lt;TD colspan='2'&gt;&lt;FONT face='Arial, Helvetica, sans-serif' size=2&gt;";
divTxt += "Frames:&lt;/TD&gt;&lt;TD width='61%'&gt;" + tmpArray[2] + "&lt;/TD&gt;&lt;/TR&gt;";
divTxt += "&lt;TR&gt;&lt;TD colspan='2'&gt;Lens:&lt;/TD&gt;&lt;TD width='61%'&gt;" + tmpArray[3] + "&lt;/TD&gt;&lt;/TR&gt;";
divTxt += "&lt;TR&gt;&lt;TD&lt;IMG height=5 src='' width=15&gt;&lt;/TD&gt;";
divTxt += "&lt;TD&gt;*&lt;/TD&gt;&lt;/TR&gt;";
divTxt += "&lt;tr&gt;&lt;TD colSpan=2&gt;Part # &lt;/TD&gt;";
divTxt += "&lt;TD&gt;" + tmpArray[4] + "&lt;/TD&gt;&lt;/TR&gt;";
divTxt += "&lt;TR&gt;&lt;TD colSpan=2&gt;Price:&lt;/TD&gt;";
divTxt += "&lt;TD&gt;&lt;B&gt;" + tmpArray[5] + "&lt;/B&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/table&gt;";

if (document.layers)
{
document.layers[divID].document.open();
document.layers[divID].document.write(divTxt);
document.layers[divID].document.close();
document.layers[divID].visibility = 'show';
}
else
{
document.all[divID].innerHTML = divTxt;
document.all[divID].style.visibility = 'visible';
}

}
[/code]

Place this in your body instead of the table with the data.

<BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
&lt;div id="oakDiv1" style="position:relative;visibility:hidden;top:0;left:0"&gt;
&lt;script language="javascript"&gt;
&lt;!--
writeDiv('oakDiv1',0);
//--&gt;
&lt;/script&gt;
&lt;/div&gt;
[/code]

If you need anything else, let me know.
Vinny

------------------
my site:GrassBlade: cut&paste javascript
moderator at:The JavaScript Place Forums
Javascript City

[This message has been edited by Vincent Puglia (edited August 04, 2000).]

[halo]

Vinny,

Thanks for all the help. I'll let you know how it works out. I have learned some things the last few days by going through most of that javascript primer at html goodies and looking at other sites, including javascriptcity.com. I intend to get one of those books so I won't have to pester you as much the next time.

[This message has been edited by halo (edited August 04, 2000).]

[halo]

Vinny - It works well in Explorer, but not Netscape 4.7
http://www.geocities.com/halo.geo/chap/oakley-3d.htm



[This message has been edited by halo (edited August 04, 2000).]

[halo]

Any idea why this doesn't work on Netscape?

[Kevin Yank]

Are you getting any error messages? Unfortunately, I don't have Netscape handy to test it here.

Try typing javascript: into the URL field and pressing Enter after clicking on one of the color links. Are there any error messages displayed in the JavaScript Debugger?


------------------
-Kevin Yank.
http://www.SitePoint.com/
Helping Small Business Grow Online!

[halo]

On Netscape 4.7 it doesn't give any errors... the product info text doesn't show up when the swatches are clicked. I tried it on Netscape 6 Preview at home and three of those Yahoo/Geocities boxes popped up... there were links inside that went to some directory... can't remember what exactly.

[Kevin Yank]

Netscape Navigator 4.x only supports changing the content of floating (or absolutely-positioned) DIV's or LAYER's. Your DIV is created using relative positioning:

&lt;div id="oakDiv1" style="position:relative;visibility:hidden;top:0;left:0"&gt;
&lt;script language="javascript"&gt;
&lt;!-- writeDiv('oakDiv1',0);
//--&gt;&lt;/script&gt;
&lt;/div&gt;

Incidentally, the above code may be corrected so that the initial information is displayed properly by putting writeDiv(...) on its own line:

&lt;div id="oakDiv1" style="position:relative;visibility:hidden;top:0;left:0"&gt;
&lt;script language="javascript"&gt;
&lt;!--
writeDiv('oakDiv1',0);
//--&gt;&lt;/script&gt;
&lt;/div&gt;

Now, back to the problem at hand. A DIV must have position:absolute before Netscape will let you alter its contents. Unfortunately, an absolutely-positioned DIV floats above the rest of the page and makes it generally difficult to lign it up with the rest of your content.

The solution is to place the dynamic (position:absolute) DIV inside a position:relative SPAN. The SPAN provides a positioning context for the absolutely positioned DIV:

&lt;span id="placeHolder" style="position:relative"&gt;
&lt;div id="oakDiv1" style="position:absolute;visibility:hidden;top:0;left:0"&gt;
&lt;script language="javascript"&gt;
&lt;!--
writeDiv('oakDiv1',0);
//--&gt;&lt;/script&gt;
&lt;/div&gt;&lt;/span&gt;

Try it out and let me know if it works!

------------------
-Kevin Yank.
http://www.SitePoint.com/
Helping Small Business Grow Online!

[halo]

that doesn't work...

[Kevin Yank]

Work with me, here. How doesn't it work? Any error messages? What happens on the screen?

------------------
-Kevin Yank.
http://www.SitePoint.com/
Helping Small Business Grow Online!

[halo]

I mean it has no effect compared to what was already on there. Works fine in Explorer still. In Netscape, no errors, but the text that's supposed to be written inside the &lt;div&gt;&lt;/div&gt; tags doesn't show at all.

I didn't bother to upload it... all I did was add the &lt;span&gt; tags http://www.geocities.com/halo.geo/chap/oakley-3d.htm