...

View Full Version : How can I add randomization to this script?



RWD
10-03-2008, 09:37 PM
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.


<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.

mrhoo
10-03-2008, 11:21 PM
After you define the array you can sort it randomly-

Pic.sort(function(){
return 0.5 - Math.random();
})

Trinithis
10-04-2008, 12:01 AM
Just so you know, that "randomization" technique is far from fair. Use this instead:



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;
};

RWD
10-04-2008, 01:34 AM
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?

RWD
10-05-2008, 02:46 AM
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.

vwphillips
10-05-2008, 02:09 PM
using yet another random prototype


<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


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

RWD
10-05-2008, 09:41 PM
Works Perfect, thanks so much for all your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum