...

View Full Version : Scrollable product script



Swizylstik
06-02-2006, 08:06 PM
I am trying to modify the scripts associated with this feature for something that I need.

http://www.simplymad.com/freelance/scroll
Here are the scripts currently associated with that feature:

http://www.simplymad.com/freelance/scroll/ebaybase_e4631us.js

http://www.simplymad.com/freelance/scroll/ebaysup_e4631us.js

http://www.simplymad.com/freelance/scroll/view_item_e4631us.js

The feature I'm trying to build is a horizontal scrollable product display similar to what is at the above link. The scroll bar will be stationary until the user clicks the forward or back buttons to scroll through the products (it will not automatically scroll on page load). The scrollable product display menu will contain product images and titles. What i would like is that when a user clicks on a product in the menu a product picture and description will load on the same page below this menu.

I'm uncertain how many products there will be so I ideally it would be cool if I could create an html page for each product with the description and that the scrollable menu script will grab the content from those pages and serve up the pictures and the links.

Any ideas? Am I on the right track by attempting to edit this exising feature to do what I want? Any simpler way of getting this done?

vwphillips
06-02-2006, 08:20 PM
I'm uncertain how many products there will be so I ideally it would be cool if I could create an html page for each product with the description and that the scrollable menu script will grab the content from those pages and serve up the pictures and the links.


this is possible using client side by would take quite a while to load the pages and extracting the data

severside/database would be better for this

An array generated from above would be a reasonable compromise

other than that the requirement can be met by standard technics

Swizylstik
06-02-2006, 08:49 PM
My understanding is that there may be only a handful of products, not hundreds which might require a database backend.

Is there no other solution? If I did want to edit the existing script can you tell me how?

Thanks

vwphillips
06-02-2006, 09:57 PM
Hard Code the array

Dont like modifying scripts but can make one.

back later

vwphillips
06-03-2006, 01:47 AM
DRAFT


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body onload="zxcCSBanner('fred1',ContentAry,120,20,10,'Main1');">
<div id="fred1" style="position:relative;overflow:hidden;width:680px;height:120px;border:solid black 1px;" >
</div>
<input class="TxtArea" type="button" name="" value="Left" onclick="zxcCngDirection('fred1',-1)" style=Width:80px;">
<input class="TxtArea" type="button" name="" value="Right" onclick="zxcCngDirection('fred1',1)" style=Width:80px;">
<div id="fred" style="width:400px;height:100px;border:solid black 1px;text-align:center;" >
<img id="Main1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
</div>
<SCRIPT language=JavaScript type=text/javascript>
<!--
// by Vic Phillips (03-June-2006) http://www.vicsjavascripts.org.uk

// DRAFT

// ***** Application Notes

// ***** Initialisation
//
// zxcCSBanner('fred1',ContentAry,120,20,10,'Main1');
// parameter 0 = the unique ID name of the Scroll <DIV>. (string)
// parameter 1 = the array containing the image data. (array variable)
// parameter 2 = the width of each scroll element. (digits)
// parameter 3 = the separation between each scroll element. (digits)
// parameter 4 = the scroll speed(milliSec). (digits)
// parameter 5 = the unique ID name of the Main Image Element. (string)

// **** Customising Variables

var zxcBGColor='#FFFFCC'; // The default background color of banner elements (string)
var zxcTxtColor='black'; // The default text color of banner elements (string)
var zxcTxtAlign='center'; // The default text alignment of banner elements (string)
var zxcFontSize='14px'; // The default font size of banner elements (string)



// **** Example Image Path and Content Array

var ContentAry=[]
// Main Image Path Sroll Image Path
ContentAry[0]=['http://www.vicsjavascripts.org.uk/StdImages/','http://www.vicsjavascripts.org.uk/StdImages/'];
// Main Img, Scroll Image, link, image width, img height, message
// 0 1 2 3 4 5
ContentAry[1]=['Zero.gif','Zero.gif','a0','100','80','Text 0'];
ContentAry[2]=['One.gif','One.gif','a1','80','80','Text 1'];
ContentAry[3]=['Two.gif','Two.gif','a2','80','80','Text 2'];
ContentAry[4]=['Three.gif','Three.gif','a3','80','80','Text 3'];
ContentAry[5]=['Four.gif','Four.gif','a4','80','80','Text 4'];
ContentAry[6]=['Five.gif','Five.gif','a5','80','80','Text 5'];
ContentAry[7]=['Six.gif','Six.gif','a6','80','80','Text 6'];
ContentAry[8]=['Seven.gif','Seven.gif','a7','80','80','Text 7'];
ContentAry[9]=['Eight.gif','Eight.gif','a8','80','80','Text 8'];
ContentAry[10]=['Nine.gif','Nine.gif','a9','80','80','Text 9'];



// **** Functional Code - NO NEED to Change

var zxcObj;
var zxcOOPCnt=0;
var zxcCursor=document.all?'hand':'pointer';

// Horizontal Banner Functions
function zxcCSBanner(zxcid,zxcary,zxcw,zxcsep,zxcspd,zxcmain){
var zxcp=document.getElementById(zxcid)
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
for (var zxc1=0;zxc1<zxcary[zxc0].length;zxc1++){
if (zxcary[zxc0][zxc1]==''){ zxcary[zxc0][zxc1]=null; }
}
}
var zxch=zxcp.offsetHeight;
zxcp.set=true;
var zxcd=document.createElement('DIV');
zxcStyle(zxcd,{position:'absolute',left:'0px',top:'0px',height:zxch+'px'});
zxcp.appendChild(zxcd);
zxcp.ary=[zxcd,zxcd.cloneNode(true),zxcd.cloneNode(true),zxcd.cloneNode(true)];
for (var zxc2=1;zxc2<zxcp.ary.length;zxc2++){
zxcp.appendChild(zxcp.ary[zxc2]);
}
var zxcobj;
for (var zxc3=0;zxc3<zxcp.ary.length;zxc3++){
zxcp.cnt=1;
var zxclft=0;
for (var zxc4=1;zxc4<Math.max(zxcary.length,Math.ceil(zxcp.offsetWidth/zxcw)+1);zxc4++){
zxcobj=document.createElement('DIV');
if (zxcary[zxcp.cnt][2]){ zxcobj.url=zxcary[zxcp.cnt][2]; zxcStyle(zxcobj,{ cursor:zxcCursor}); zxcobj.onclick=function(){ zxcMainImage(this); } }
zxcobj.main=zxcary[zxcp.cnt][0]||'';
zxcStyle(zxcobj,{position:'absolute',left:(zxclft)+'px',top:'0px',width:(zxcw)+'px',height:(zxch)+'p x'});
zxcp.ary[zxc3].appendChild(zxcobj);
zxcobj.img=document.createElement('IMG');
zxcobj.main=[document.getElementById(zxcmain),zxcary[0][0]+zxcary[zxcp.cnt][0]];
zxcobj.img.src=zxcary[0][1]+zxcary[zxcp.cnt][1];
zxcStyle(zxcobj.img,{position:'absolute',left:((zxcw-zxcary[zxcp.cnt][3])/2)+'px',top:'10px',width:(zxcary[zxcp.cnt][3])+'px',height:(zxcary[zxcp.cnt][4])+'px'});
zxcobj.appendChild(zxcobj.img);
zxcobj.txt=document.createElement('DIV');
zxcStyle(zxcobj.txt,{position:'absolute',left:(0)+'px',top:(zxch-20)+'px',width:'100%',backgroundColor:(zxcBGColor),color:(zxcTxtColor),textAlign:(zxcTxtAlign),fontS ize:(zxcFontSize)});
zxcobj.appendChild(zxcobj.txt);
zxcobj.txt.innerHTML=zxcary[zxcp.cnt][5]||'';

zxclft+=parseInt(zxcobj.style.width)+zxcsep;
zxcp.cnt=++zxcp.cnt%zxcary.length;
}
}
var zxcpw=(zxcary.length-1)*(zxcw+zxcsep); //zxclft-zxc3*zxcsep;//parseInt(zxcp.ary[0].style.width);
for (var zxc4=0;zxc4<zxcp.ary.length;zxc4++){
zxcStyle(zxcp.ary[zxc4],{width:(zxcpw)+'px',left:(zxcpw*zxc4-zxcpw)+'px'});
zxcp.ary[zxc4].nu=zxc4;
}
if (!zxcp.oopbr){ zxcp.oopbr=new zxcOOPBannerRotate(zxcp.ary,zxcspd,zxcpw,zxcw,zxcsep); }
}

function zxcCngDirection(zxcid,zxcdir){
var zxcobj=document.getElementById(zxcid);
clearTimeout(zxcobj.oopbr.to);
if (zxcdir>0){ zxcobj.oopbr.dir=1; }
else { zxcobj.oopbr.dir=-1; }
if (zxcobj.oopbr.imgsz){ zxcStyle(zxcobj.oopbr.imgsz[0],{top:zxcobj.oopbr.imgsz[3],width:zxcobj.oopbr.imgsz[1]+'px',height:zxcobj.oopbr.imgsz[2]+'px'}); }
zxcobj.oopbr.rotate();
}

function zxcMainImage(zxcobj){
zxcobj.main[0].src=zxcobj.main[1];
}

function zxcStyle(zxcele,zxcstyle){
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
}


function zxcOOPBannerRotate(zxcary,zxcspd,zxcpw,zxcw,zxcsep){
this.ref='zxcoobr'+zxcOOPCnt++;
window[this.ref]=this;
this.ary=zxcary;
this.spd=zxcspd||100;
this.stop=zxcw+zxcsep;
this.to=null;
this.dir=1;
this.pw=zxcpw;
}

zxcOOPBannerRotate.prototype.rotate=function(){
this.ary[1].style.left=(parseInt(this.ary[1].style.left)+this.dir)+'px';
this.ary[0].style.left=(parseInt(this.ary[1].style.left)-this.pw)+'px';
this.ary[2].style.left=(parseInt(this.ary[2].style.left)+this.dir)+'px';
this.ary[3].style.left=(parseInt(this.ary[2].style.left)+this.pw*2)+'px';
if (this.dir<0&&parseInt(this.ary[1].style.left)+this.pw<0){
this.ary[1].style.left=(parseInt(this.ary[2].style.left)+this.pw)+'px';
this.ary.reverse();
}
if (this.dir>0&&parseInt(this.ary[1].style.left)>this.pw){
this.ary[1].style.left=(parseInt(this.ary[2].style.left)-this.pw)+'px';
this.ary.reverse();
}
if (parseInt(this.ary[1].style.left)%this.stop!=0){ this.setTimeOut('rotate();',this.spd); }
else { this.analyse(); }
}

zxcOOPBannerRotate.prototype.analyse=function(){
var zxccen=this.ary[1].parentNode.offsetWidth/2;
for (var zxc0=0;zxc0<this.ary.length;zxc0++){
var zxcobjs=this.ary[zxc0].childNodes;
for (var zxc1=0;zxc1<zxcobjs.length;zxc1++){
if (zxcobjs[zxc1].offsetLeft+this.ary[zxc0].offsetLeft<zxccen&&zxcobjs[zxc1].offsetLeft+zxcobjs[zxc1].offsetWidth+this.ary[zxc0].offsetLeft>zxccen){
this.imgsz=[zxcobjs[zxc1].img,zxcobjs[zxc1].img.width,zxcobjs[zxc1].img.height,zxcobjs[zxc1].img.style.top];
zxcStyle(zxcobjs[zxc1].img,{ top:'0px',width:(this.imgsz[1]*1.1)+'px',height:(this.imgsz[2]*1.1)+'px'});
break;
}
}
}

}

zxcOOPBannerRotate.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

//-->
</SCRIPT>
</body>

</html>

Swizylstik
06-03-2006, 03:00 AM
Wow :thumbsup: that is pretty terrific. It looks like all I need now is to make some cosmetic changes to pretty it up.

Is there a way to serve up text as well as the larger graphic when you click on the image?

You made this so easy. This is 100 times easier for me to work with than the script I started with. Where've you been all my life?

Thank you so much!

vwphillips
06-03-2006, 11:06 AM
see

http://www.vicsjavascripts.org.uk/ScrollStep/ScrollStep.htm

Swizylstik
06-03-2006, 06:21 PM
That is fantastic. I have one more annoying question; is there a way to code this so that when you click on the smaller image in the scroll bar that it loads an HTML page underneath rather than a text box? This way I could just create an HTML doc for each product with all the details and just call that file to load underneath the scroll.

Ultimately, this is exactly what I'm trying to achieve:

Sample Image (http://www.simplymad.com/freelance/sample.jpg)


How much do I owe ya!

-T

Swizylstik
06-03-2006, 06:23 PM
Also

I love the stop-step, but I need it to simply scroll left and right and not stop and pop up like that (although I think that is a better feature)

-T

vwphillips
06-03-2006, 07:56 PM
I was thinking an Iframe to display a page would be better but why have a large image, best with just an iframe, no need to change the stucture to do this.


t to simply scroll left and right and not stop and pop

sounds a daft idea but one line change and its done.

Sharps on tonight and a couple of other posts to look after so prob tomorrow




How much do I owe ya

I will pm my paypay email

lookingat120
06-03-2006, 07:57 PM
Also

I love the stop-step, but I need it to simply scroll left and right and not stop and pop up like that (although I think that is a better feature)

-T

vwphillips
06-03-2006, 09:40 PM
Now with Step(with expand), Stop, Start, Continious, Main Image, Main Text and FRAME options

see

http://www.vicsjavascripts.org.uk/ScrollStep/060603.htm

Swizylstik
06-03-2006, 11:15 PM
:thumbsup: That's cool. But when you are scrolling left, it doesn't stop scrolling when you take your mouse off the "left" button or even when you click on an image. The right button works great.

Thanks!

vwphillips
06-03-2006, 11:51 PM
Its all in the notes but the main site has been updated

Swizylstik
06-04-2006, 09:32 AM
:eek:

vwphillips
06-04-2006, 09:56 AM
If you have a question, it must be specified to be answered.

Swizylstik
06-05-2006, 05:46 AM
Is there a way to make this so that instead of a text box appearing under the large picture when you click on a scrooling product that an html file loads instead?

I.e., when you click the number 7 graphic, a larger picture shows underneath and the words "Main Text Seven" in the box beneath that. I would like it to be that when you click on the number graphic that it loads an html page instead. This way I can create an html page for every picture that has the large image plus all the text underneath.

The reason I need this is because I need to have more than just text underneath. I need to have tables and links, etcetera.

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum