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.
Results 1 to 7 of 7
  1. #1
    RWD
    RWD is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How can I add randomization to this script?

    I have found a script that I am allowed to use that generates a scroll bar that can have images in it that are linked. I have it all working but the images stay in order as they are defined in the array.

    I have no experience with coding, I usually can understand enough of the scripts to make some setting adjustments and trial and error type changes.

    What I would like to do with this script is make it so the various images defined are randomized so that each time the script runs the images will appear in different order. My intentions for this is to display various ads and I do not want any advertiser to always have the first few spots.

    Code:
    <html>
    <head>
    <Script>
    
    var pic = new Array()
    
    function banner(name, width, link){
    	this.name = name
    	this.width = width
    	this.link = link
       }
    
    pic[0] = new banner('img/js1.jpg',190,'http://www.google.com/')
    pic[1] = new banner('img/js2.jpg',190,'http://www.yahoo.com/')
    pic[2] = new banner('img/js3.jpg',190,'http://www.msn.com/')
    pic[3] = new banner('img/js4.jpg',190,'http://www.microsoft.com/')
    pic[4] = new banner('img/js5.jpg',190,'http://www.firefox.com/')
    pic[5] = new banner('img/js6.jpg',190,'http://www.google.com/')
    pic[6] = new banner('img/js7.jpg',190,'http://www.yahoo.com/')
    pic[7] = new banner('img/js8.jpg',190,'http://www.msn.com/')
    
    var speed = 1
    
    var kk = pic.length
    var ii
    var hhh
    var nnn
    var myInterval
    var myPause
    var mode = 0
    
    var imgArray = new Array(kk)
    var myLeft = new Array(kk)
    
    for (ii=0;ii<kk;ii++){
    imgArray[ii] = new Image()
    imgArray[ii].src = pic[ii].name
    imgArray[ii].width = pic[ii].width
    
    	hhh=0 
    	for (nnn=0;nnn<ii;nnn++){
    		hhh=hhh+pic[nnn].width
    	}
    	myLeft[ii] = hhh
    }
    
    function ready(){
    	for (ii=0;ii<kk;ii++){ 
    		if (document.images[ii].complete == false){
    			return false	
    			break
    		}
    	}
    return true
    }
    
    function startScrolling(){
    	if (ready() == true){		
    		window.clearInterval(myPause)
    		myInterval = setInterval("autoScroll()",speed)	
    	}
    }		
    
    function autoScroll(){
    	for (ii=0;ii<kk;ii++){
    		myLeft[ii] = myLeft[ii] - 1
    		
    	if (myLeft[ii] == -(pic[ii].width)){
    		hhh = 0
    		for (nnn=0;nnn<kk;nnn++){
    			if (nnn!=ii){
    				hhh = hhh + pic[nnn].width
    			}			
    		}
    		myLeft[ii] =  hhh
    	}			
    		document.images[ii].style.left = myLeft[ii]
    	}
    	mode = 1
    }
    
    function stop(){
    	if (mode == 1){
    		window.clearInterval(myInterval)
    	}
    	if (mode == 0){
    		window.clearInterval(myPause)
    	}	
    }
    
    function go(){
    	if (mode == 1){
    		myInterval = setInterval("autoScroll()",speed)
    	}
    	if (mode == 0){
    		myPause = setInterval("startScrolling()",1000)
    	}	
    }
    
    myPause = setInterval("startScrolling()",1000)
    </Script>
    
    <body bgcolor='#ffffff'>
    <Script>
    for (ii=0;ii<kk;ii++){
    document.write('<a href = ' + pic[ii].link + ' target="_blank" ><img space=0 hspace=0 vspace=0 border=0 height=99 style=position:absolute;top:0;left:' + myLeft[ii]  + '; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go()></a>')
    }
    </Script>
    </body>
    </html>
    Any help would be greatly appreciated.
    Thanks.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    After you define the array you can sort it randomly-
    Code:
    Pic.sort(function(){
    	return 0.5 - Math.random();
    })

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Just so you know, that "randomization" technique is far from fair. Use this instead:

    Code:
    Array.prototype.shuffle = function(deep) {
      for(var i = this.length; i > 1; --i)
        this.swap(i - 1, Math.floor(Math.random() * i));
      return this;
    };
    
    Array.prototype.swap = function(i, j) {
      var t = this[i];
      this[i] = this[j]
      this[j] = t;
    };
    Trinithis

  • #4
    RWD
    RWD is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks fro the replies!

    OK, here is where my inexperience comes in.

    Can I just copy and paste this into my existing code somewhere? If so where exactly does it need to go?

  • #5
    RWD
    RWD is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I would greatly appreciate specific instructions on where to place the code into the script I have to make it work. I have tried it several ways and it doesn't seem to do anything.

    Like I said, I have 0 experience with code so unfortunately I need exact details.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    using yet another random prototype

    Code:
    <html>
    <head>
    <Script>
    
    var pic = new Array()
    Array.prototype.randomise=function(){
     zxccnt=0; zxcta=[];
     while (zxccnt<this.length){
      zxctmp=Math.floor(Math.random()*this.length-1)+1;
      if (!zxcta[zxctmp]){zxcta[zxctmp]=this[zxccnt]; zxccnt++; }
     }
     return zxcta;
    }
    
    function banner(name, width, link){
    	this.name = name
    	this.width = width
    	this.link = link
       }
    
    pic[0] = new banner('http://www.vicsjavascripts.org.uk/StdImages/Zero.gif',190,'http://www.google.com/')
    pic[1] = new banner('http://www.vicsjavascripts.org.uk/StdImages/One.gif',190,'http://www.yahoo.com/')
    pic[2] = new banner('http://www.vicsjavascripts.org.uk/StdImages/Two.gif',190,'http://www.msn.com/')
    pic[3] = new banner('http://www.vicsjavascripts.org.uk/StdImages/Four.gif',190,'http://www.microsoft.com/')
    pic[4] = new banner('http://www.vicsjavascripts.org.uk/StdImages/Five.gif',190,'http://www.firefox.com/')
    //pic[5] = new banner('img/js6.jpg',190,'http://www.google.com/')
    //pic[6] = new banner('img/js7.jpg',190,'http://www.yahoo.com/')
    //pic[7] = new banner('img/js8.jpg',190,'http://www.msn.com/')
    pic=pic.randomise();
    var speed = 1
    
    var kk = pic.length
    var ii
    var hhh
    var nnn
    var myInterval
    var myPause
    var mode = 0
    
    var imgArray = new Array(kk)
    var myLeft = new Array(kk)
    
    for (ii=0;ii<kk;ii++){
    imgArray[ii] = new Image()
    imgArray[ii].src = pic[ii].name
    imgArray[ii].width = pic[ii].width
    
    	hhh=0
    	for (nnn=0;nnn<ii;nnn++){
    		hhh=hhh+pic[nnn].width
    	}
    	myLeft[ii] = hhh
    }
    
    function ready(){
    	for (ii=0;ii<kk;ii++){
    		if (document.images[ii].complete == false){
    			return false
    			break
    		}
    	}
    return true
    }
    
    function startScrolling(){
    	if (ready() == true){
    		window.clearInterval(myPause)
    		myInterval = setInterval("autoScroll()",speed)
    	}
    }
    
    function autoScroll(){
    	for (ii=0;ii<kk;ii++){
    		myLeft[ii] = myLeft[ii] - 1
    
    	if (myLeft[ii] == -(pic[ii].width)){
    		hhh = 0
    		for (nnn=0;nnn<kk;nnn++){
    			if (nnn!=ii){
    				hhh = hhh + pic[nnn].width
    			}
    		}
    		myLeft[ii] =  hhh
    	}
    		document.images[ii].style.left = myLeft[ii]
    	}
    	mode = 1
    }
    
    function stop(){
    	if (mode == 1){
    		window.clearInterval(myInterval)
    	}
    	if (mode == 0){
    		window.clearInterval(myPause)
    	}
    }
    
    function go(){
    	if (mode == 1){
    		myInterval = setInterval("autoScroll()",speed)
    	}
    	if (mode == 0){
    		myPause = setInterval("startScrolling()",1000)
    	}
    }
    
    myPause = setInterval("startScrolling()",1000)
    </Script>
    
    <body bgcolor='#ffffff'>
    <Script>
    for (ii=0;ii<kk;ii++){
    document.write('<a href = ' + pic[ii].link + ' target="_blank" ><img space=0 hspace=0 vspace=0 border=0 height=99 style=position:absolute;top:0;left:' + myLeft[ii]  + '; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go()></a>')
    }
    </Script>
    </body>
    </html>

    However the script you have chosen is very old and suggest you find a better script

    You could try

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #tst2 IMG{
     margin-Left:20px;
     border-Width:0px;
    }
    
    /*]]>*/
    </style><script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Continious ScrollerII (14-December-2007)
    // by: Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    // Application Notes
    // The effect is initialised and controlled by event calls to function
    // zxcScroller('h','tst2','start',1,100,200);
    // where:
    // parameter 0 = the mode, for vertical 'v', for horizontal 'h'.                     (string 'v' or 'h');
    // parameter 1 = the unique id name of the scroll container.                         (string);
    // parameter 2 = start or stop.                                                      (string 'start' or 'stop');
    // parameter 3 = to scroll up/left = negative digit or down/right = positive digit.  (digit);
    //               may also be used to control the scroll speed.
    // parameter 4 = the scroll speed (milli seconds).                                   (digits);
    // parameter 5 = the initial delay before scrolling (milli seconds).                 (digits);
    //
    // The first call will initialise the effect.
    // Subsequent calls may be used control the effect by updating parameters 2, 3 and 4.
    // If parameters 2 or 3 are not specified the parameter will be toggled.
    // Examples
    //<input type="button" name="" value="Toggle Direction" onclick="zxcScroller('h','tst2','start');"/>
    //<input type="button" name="" value="Toggle Stop/Start" onclick="zxcScroller('h','tst2');"/>
    
    // Functional Code size = 2.4k
    
    function zxcScroller(zxcmde,zxcid,zxcrun,zxcud,zxcspd,zxcsrt){
     var zxcp=document.getElementById(zxcid);
     if (!zxcp[zxcmde+'scroll']) return zxcp[zxcmde+'scroll']= new zxcScrollerOOP(zxcmde,zxcp,zxcrun,zxcud,zxcspd,zxcsrt);
     var zxcoop=zxcp[zxcmde+'scroll']
     clearTimeout(zxcp.to);
     zxcoop.spd=zxcspd||zxcoop.spd;
     zxcoop.ud=zxcud||-zxcoop.ud;
     zxcp[zxcmde+'run']=(zxcrun=='stop'||zxcrun=='start')?zxcrun:(zxcp[zxcmde+'run']=='stop')?'start':'stop';
     if (zxcp[zxcmde+'run']=='start') zxcoop.scroll();
    }
    
    function zxcScrollerOOP(zxcmde,zxcp,zxcrun,zxcud,zxcspd,zxcsrt){
     this.p=zxcp;
     var zxcc=this.p.getElementsByTagName('DIV')[0]
     this.vh=(zxcmde.charAt(0).toLowerCase()=='v');
     this.mde=zxcmde;
     this.ary=[];
     this.ary[0]=[zxcc,0];
     var zxcmax=(((this.vh)?this.ary[0][0].offsetHeight:this.ary[0][0].offsetWidth))+((this.vh)?this.p.offsetHeight:this.p.offsetWidth);
     this.wh=(this.mde.charAt(0).toLowerCase()=='v')?this.ary[0][0].offsetHeight:this.ary[0][0].offsetWidth;
     var zxcpos=0;
     while (zxcpos<zxcmax){
      var zxc1=this.ary.length;
      this.ary[zxc1]=[this.ary[0][0].cloneNode(true),zxcpos+=this.wh];
      zxcES(this.ary[zxc1][0],{position:'absolute',left:((this.vh)?0:this.ary[zxc1][1])+'px',top:((this.vh)?this.ary[zxc1][1]:0)+'px'},this.p);
     }
     this.ud=zxcud||-1;
     this.spd=zxcspd||100;
     this.p.to=null;
     this.data=[zxcpos,-this.wh];
     this.p[this.mde+'run']=(zxcrun=='stop'||zxcrun=='start')?zxcrun:'start';
     if (this.p[this.mde+'run']) this.p.to=setTimeout(function(zxcoop){return function(){zxcoop.scroll();}}(this),zxcsrt||500);
    }
    
    zxcScrollerOOP.prototype.scroll=function(){
     if (this.p[this.mde+'run']=='start'){
      for (var zxc1=0;zxc1<this.ary.length;zxc1++){
       this.ary[zxc1][1]+=this.ud;
       zxcES(this.ary[zxc1][0],{position:'absolute',left:((this.vh)?0:this.ary[zxc1][1])+'px',top:((this.vh)?this.ary[zxc1][1]:0)+'px'});
       if ((this.ud<0&&this.ary[zxc1][1]<=this.data[1])||(this.ud>0&&this.ary[zxc1][1]>this.data[0])) this.ary[zxc1][1]=this.data[(this.ud<0)?0:1];
      }
     }
     this.p.to=setTimeout(function(zxcoop){return function(){zxcoop.scroll();}}(this),this.spd);
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcRandomise(zxcid,zxctag){
     var zxcp=document.getElementById(zxcid).getElementsByTagName('DIV')[0];
     var zxcobjs=zxcp.childNodes;
     for (var zxcary=[],zxclft=0,zxc0=0;zxc0<zxcobjs.length;zxc0++){
      if (zxcobjs[zxc0].nodeName==zxctag){
       zxcary.push(zxcobjs[zxc0]);
       zxclft=zxcobjs[zxc0].offsetLeft+zxcobjs[zxc0].offsetWidth;
      }
     }
     zxcES(zxcp,{width:zxclft+'px'});
     zxcary=zxcary.randomise();
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){
      zxcary[zxc1].parentNode.appendChild(zxcary[zxc1]);
     }
    }
    
    Array.prototype.randomise=function(){
     zxccnt=0; zxcta=[];
     while (zxccnt<this.length){
      zxctmp=Math.floor(Math.random()*this.length-1)+1;
      if (!zxcta[zxctmp]){zxcta[zxctmp]=this[zxccnt]; zxccnt++; }
     }
     return zxcta;
    }
    
    /*]]>*/
    </script></head>
    
    <body onload="zxcRandomise('tst2','A');zxcScroller('h','tst2','start',-1,10,1200);" >
    <div id="tst2" style="position:relative;overflow:hidden;width:900px;height:100px;border:solid black 1px;background-Color:black;"
    onmouseout="this.hrun='start';"
    onmouseover="this.hrun='stop';"
    >
    
    <div style="width:370px;background-Color:red;" >
    <a href="#"><img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width="100" height="100" /></a>
    <a href="#"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" /></a>
    <a href="#"><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="100" /></a>
    </div>
    
    </div>
    </form>
    
    </body>
    
    </html>
    Last edited by vwphillips; 10-05-2008 at 01:43 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/

  • Users who have thanked vwphillips for this post:

    RWD (10-05-2008)

  • #7
    RWD
    RWD is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Works Perfect, thanks so much for all your help.


  •  

    Posting Permissions

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