Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jun 2006
    Location
    New York
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Scrollable product script

    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/s...ase_e4631us.js

    http://www.simplymad.com/freelance/s...sup_e4631us.js

    http://www.simplymad.com/freelance/s...tem_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?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,520
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jun 2006
    Location
    New York
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Next---

    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

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,520
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Hard Code the array

    Dont like modifying scripts but can make one.

    back later
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,520
    Thanks
    3
    Thanked 507 Times in 494 Posts
    DRAFT
    Code:
    <!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)+'px'});
       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),fontSize:(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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Jun 2006
    Location
    New York
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Wow

    Wow 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!

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,520
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New Coder
    Join Date
    Jun 2006
    Location
    New York
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Fabulous!

    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


    How much do I owe ya!

    -T

  • #9
    New Coder
    Join Date
    Jun 2006
    Location
    New York
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Also...

    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

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,520
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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
    Last edited by vwphillips; 06-03-2006 at 07:59 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #11
    Banned
    Join Date
    Jun 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,520
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Now with Step(with expand), Stop, Start, Continious, Main Image, Main Text and FRAME options

    see

    http://www.vicsjavascripts.org.uk/ScrollStep/060603.htm
    Last edited by vwphillips; 06-03-2006 at 11:03 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #13
    New Coder
    Join Date
    Jun 2006
    Location
    New York
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool

    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!

  • #14
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,520
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Its all in the notes but the main site has been updated
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #15
    New Coder
    Join Date
    Jun 2006
    Location
    New York
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Huh?



  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •