Javascript Code - Products Info Page

[maxiva]

Hi to all,

I've read many post about inserting javascript code in the pages. More I read
more confused I get.

In an normal html code page, this code works fine if inserted between the right tag.

when I tried to copy it in the product page, the brouser ie reports an error.

this is the code... is a slideshow:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var rotate_delay = 3000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "AutoPlay" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}
//  End -->
</script>

This is the HTML code for the sliding pictures

</head>





<!-- CONTENT TABLE -->
<TABLE cellpadding=0 cellspacing=0 border=0 width="100%" height="100%"><tr><td ALIGN=center VALIGN=center>




<form name=slideform>





<!-- EDIT THIS AREA TO ADD AND REMOVE PICTURES FROM THE SLIDESHOW -->


<input type=hidden value="cart/images/Fgallery1-1.jpg" name="slide" onChange="change();">
<input type=hidden value="cart/images/Fgallery1-2.jpg" name="slide" onChange="change();">

<table width="232" height="174" border="0" cellpadding="1" cellspacing="0">
  <tr>
    <td align=center height="30">


<span class="slideshowtitle">ZENCART</span>



</td>
  </tr><tr><td align="center" bgcolor="C0C0C0" height="150">


<!-- THE NEXT LINE IS THE STARTING PICTURE -->

<img src="/cart/images/Fgallery1-1.jpg" name="show"><br>



</td></tr><tr><td align=center height="50"><input type=button name="slidebutton" onClick="ap(this.value);" value="AutoPlay" title="AutoPlay" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'"></td>
</tr>
</table>
</form>




</td></tr></table>

Can you please help me to find a solution?

Thanks to all

Maxiva

Zencart 1.38a
THE BEST

[DrByte]

1. For your first snippet, put all that code into a new file: /includes/modules/pages/product_info/jscript_slidingpics.js

Before you save the file, remove the line at the top which says <SCRIPT language="javacript">
and also remove the line at the bottom which says </script>

2. For the second part, paste that code (without the </head> tag) into your customized tpl_product_info_default.php file wherever you want your slider to appear.

At least, that's how the Zen Cart structure would work. I can't say whether the code you've posted works ... I haven't tried it. I've only re-explained what's documented in the FAQs, in the wiki, and in the /docs/ folder of your Zen Cart files as it relates to javascript insertion, using your code as an example.

[maxiva]

Hi DrByte,

thanks for your help.

I've done like you said, I found that the code works fine in the preview page. The problem appears after I push update, and the page is set. In the product page if you push autostart and you try to see the pictures IE reports an error.

document.slideform.slidebutton is null on not an object.

I run the MSscripteditor the problem is in here:

document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";

I don't understand why it works in the preview and not in the product page.

Do you have any idea???

thanks

Maxiva

zencart 1.38a
THE BEST

[DrByte]

Sorry, no. Without seeing the actual site where it's happening, all I can do is guess. I've described how it works. Perhaps you put stuff in the wrong place somehow?

[maxiva]

Hi,

If I make the /includes/modules/pages/product_info/jscript_slideshow.js or if I put the javascritpt code directly in the page I don't find any difference.

Yes thanks... this is the testing page if you have time have a look:

http://www.rcplanet.ch/cart2/index.p...products_id=16

In admin, the preview page works....

Thanks

Maxiva

Zencart 1.38a
The Best

[DrByte]

Well it can't work properly if you're dumping code in at random.

Right now you've got the javascript duplicated in a couple places, and you've added an extra </head> tag, and you're getting various javascript errors, as well as a plugin error, among other things.

[maxiva]

You are right.

I'm using dreamweaver to make the page and than copy it in to Zencart.

My coding skill are very bad and I find this system easier to build the pages.

Unfortunatly I'm not able to clean the code, for that reason I asked some help here.

If the code is so confused, no worry if you can't help me, I'm just tring to learn how zencart works.

I found it very interesting.

Thanks for your help

Maxiva
Zencart 1.38a
The Best

[maxiva]

Hi,

I've tried to clean the code ... It's a fight against myself!!!!

head tag removed!

this is the HTML code that I use in the page:

<table width="100%" align="right" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td width="33%" valign="top">
<title>
<div align="center">Image Slideshow</div>
</title>

<div align="center">

<script src="/cart2/includes/modules/pages/product_info/jscript_slideshow.js" type="text/javascript"></script>
  
<!-- CONTENT TABLE -->

</div>
<TABLE cellpadding=0 cellspacing=0 border=0 width="100%" height="100%"><tr><td ALIGN=center VALIGN=center>

<form name=slideform>

<!-- EDIT THIS AREA TO ADD AND REMOVE PICTURES FROM THE SLIDESHOW -->

<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-1.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-2.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-3.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-4.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-5.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-6.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-7.jpg" name="slide" onChange="change();">

<table width="232" height="174" border="0" cellpadding="1" cellspacing="0">
<tr><td align=center height="30">

<span class="slideshowtitle">Gallery Slideshow</span>


</td></tr><tr><td align="center" bgcolor="C0C0C0" height="150">


<!-- THE NEXT LINE IS THE STARTING PICTURE -->

<img src="/cart2/images/amax/25081/small/Fgallery1-1.jpg" name="show"><br>



</td></tr><tr><td align=center height="50">

<input type=button onClick="first();" value="|<<" title="Beginning" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
<input type=button onClick="previous();" value="<<" title="Previous" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
<input type=button name="slidebutton" onClick="ap(this.value);" value="AutoPlay" title="AutoPlay" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
<input type=button onClick="next();" value=">>" title="Next" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
<input type=button onClick="last();" value=">>|" title="End" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
</td>
</tr>
</table>
</form>




</td></tr></table>


<!-- THIS IS MEDIAPLAYER MOVIE -->

</ST1:PLACE>
<div align="center">
<object id="MediaPlayer1" width="232" height="208" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<param name="FileName" value="/cart2/video/maxiva.wmv">
<param name="animationatStart" value="false">
<param name="transparentatStart" value="false">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="/cart2/video/maxiva.wmv" AutoStart="true" ShowStatusBar="0" volume="-1" HEIGHT="208" WIDTH="232"></embed></object><br>

</div></td>
<td width="67%" valign="top"><div align="left"><span class="Stile2"><strong>TECHNICAL DATA </strong>
</span>
<ul>
<li class="Stile2">                                    Height: 190mm</li>
<li class="Stile2">                                    Gear Ratio: 1:11.71</li>
<li class="Stile2">                                    Ground Clearance: 27mm</li>
<li class="Stile2">                                    Wheelbase: 320-325mm</li>
<li class="Stile2">                                    Track(F/R): 258/260mm</li>
<li class="Stile2">                                    Weight: 3300g</li>
<li class="Stile2">                                    Tank: 125cc</li>
<li class="Stile2">                                    Engine: 21cxp </li>
<li class="Stile2">                                    Tires: 116*42mm</li>
</ul>
<p>&nbsp;</p>
<ul><li class="Stile2">Four wheel center main shaft drive system</li>
<li class="Stile2">High performance spur gears and pinions complete</li>
<li class="Stile2">6061/t6 solid anodized aluminum radio tray/front top plate and front/rear   shock tower.</li>
<li class="Stile2">Solid universal joint cup/good quality ball bearings</li>
<li class="Stile2">Good quality 1/8th scale buggy wheel rims &amp; pre-mounted 1/8th scale   aggressive urable buggy tyres.</li>
<li class="Stile2">Alum. chassis with good quality extra large plastic left and right side   plates is suited for vehicle stability and features good protection against   little stones getting in.</li>
<li class="Stile2">Good quality all plastic parts applied.</li>
<li class="Stile2">Disc brake system provides good and quick brake response.</li>
<li class="Stile2">Extra large capacity leak proof fuel tank with the overflow pipe and spring   loaded fill cover for quick re-fueling  </li>
<li class="Stile2">6mm solid rear anti roll bar &amp; compact battery/receiver box design   allows for good protection against water and dust.</li>
<li class="Stile2">Oil filled shock absorbers with solid shock bodies /extra large heat sink   provides quick engine heatproof response. </li>
</ul></div>
</td></tr><tr>
<td colspan="2" valign="top"><div align="center"></div></td>
</tr>
</tbody>
</table>
<br>
&nbsp;</p>
<p align="left"> </p>
<p align="left"> </p>

this is the jscript_slideshow.js

// JavaScript Document
<!-- Begin
var rotate_delay = 3000;
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}
//  End -->

the rest is added by zencart.

Where do you find the javascript errors?

Have a nice day.

Maxiva
Zencart 1.38a

The Best

[DrByte]

You do not need this line in your product description, because Zen Cart already generates it for you:

<script src="/cart2/includes/modules/pages/product_info/jscript_slideshow.js" type="text/javascript"></script>

[maxiva]

I've cancelled the line!!!
It doesn't work.

<table width="100%" align="right" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td width="33%" valign="top">
<title>
<div align="center">Image Slideshow</div>
</title>

<div align="center">

 
<!-- CONTENT TABLE -->

</div>
<TABLE cellpadding=0 cellspacing=0 border=0 width="100%" height="100%"><tr><td ALIGN=center VALIGN=center>

<form name=slideform>

<!-- EDIT THIS AREA TO ADD AND REMOVE PICTURES FROM THE SLIDESHOW -->

<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-1.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-2.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-3.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-4.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-5.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-6.jpg" name="slide" onChange="change();">
<input type=hidden value="/cart2/images/amax/25081/small/Fgallery1-7.jpg" name="slide" onChange="change();">

<table width="232" height="174" border="0" cellpadding="1" cellspacing="0">
<tr><td align=center height="30">

<span class="slideshowtitle">Gallery Slideshow</span>


</td></tr><tr><td align="center" bgcolor="C0C0C0" height="150">


<!-- THE NEXT LINE IS THE STARTING PICTURE -->

<img src="/cart2/images/amax/25081/small/Fgallery1-1.jpg" name="show"><br>



</td></tr><tr><td align=center height="50">

<input type=button onClick="first();" value="|<<" title="Beginning" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
<input type=button onClick="previous();" value="<<" title="Previous" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
<input type=button name="slidebutton" onClick="ap(this.value);" value="AutoPlay" title="AutoPlay" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
<input type=button onClick="next();" value=">>" title="Next" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
<input type=button onClick="last();" value=">>|" title="End" class="button-popups" onMouseOver="this.className='buttonon-popups'" onMouseOut="this.className='button-popups'">
</td>
</tr>
</table>
</form>




</td></tr></table>


<!-- THIS IS MEDIAPLAYER MOVIE -->

</ST1:PLACE>
<div align="center">
<object id="MediaPlayer1" width="232" height="208" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<param name="FileName" value="/cart2/video/maxiva.wmv">
<param name="animationatStart" value="false">
<param name="transparentatStart" value="false">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="/cart2/video/maxiva.wmv" AutoStart="true" ShowStatusBar="0" volume="-1" HEIGHT="208" WIDTH="232"></embed></object><br>

</div></td>
<td width="67%" valign="top"><div align="left"><span class="Stile2"><strong>TECHNICAL DATA </strong>
</span>
<ul>
<li class="Stile2">                                    Height: 190mm</li>
<li class="Stile2">                                    Gear Ratio: 1:11.71</li>
<li class="Stile2">                                    Ground Clearance: 27mm</li>
<li class="Stile2">                                    Wheelbase: 320-325mm</li>
<li class="Stile2">                                    Track(F/R): 258/260mm</li>
<li class="Stile2">                                    Weight: 3300g</li>
<li class="Stile2">                                    Tank: 125cc</li>
<li class="Stile2">                                    Engine: 21cxp </li>
<li class="Stile2">                                    Tires: 116*42mm</li>
</ul>
<p> </p>
<ul><li class="Stile2">Four wheel center main shaft drive system</li>
<li class="Stile2">High performance spur gears and pinions complete</li>
<li class="Stile2">6061/t6 solid anodized aluminum radio tray/front top plate and front/rear   shock tower.</li>
<li class="Stile2">Solid universal joint cup/good quality ball bearings</li>
<li class="Stile2">Good quality 1/8th scale buggy wheel rims & pre-mounted 1/8th scale   aggressive urable buggy tyres.</li>
<li class="Stile2">Alum. chassis with good quality extra large plastic left and right side   plates is suited for vehicle stability and features good protection against   little stones getting in.</li>
<li class="Stile2">Good quality all plastic parts applied.</li>
<li class="Stile2">Disc brake system provides good and quick brake response.</li>
<li class="Stile2">Extra large capacity leak proof fuel tank with the overflow pipe and spring   loaded fill cover for quick re-fueling  </li>
<li class="Stile2">6mm solid rear anti roll bar & compact battery/receiver box design   allows for good protection against water and dust.</li>
<li class="Stile2">Oil filled shock absorbers with solid shock bodies /extra large heat sink   provides quick engine heatproof response. </li>
</ul></div>
</td></tr><tr>
<td colspan="2" valign="top"><div align="center"></div></td>
</tr>
</tbody>
</table>
<br>
 </p>
<p align="left"> </p>
<p align="left"> </p>

Also the preview doesn't work.
Any idea?