Making two scripts co-exist on one page.

[lonogod]

Hello everyone! Merry Christmas to you!

I have these two scripts that both work separately but not together. Obviously, they are virtually identical except the X's to make them different. I thought that would be enough, but clearly it wasn't.

How can I have these two co-exist on the same page? I might even add a third or fourth...just to let you know.

Thank you in advance!

<script type="text/javascript">

var snowmax=50
var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF")
var snowtype=new Array("Arial","Times")
var snowletter="*"
var sinkspeed=0.4
var snowmaxsize=40
var snowminsize=15
var snowingzone=1

var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||ns6||opera

function randommaker(range) {

rand=Math.floor(range*Math.random())
return rand
}

function initsnow() {

if (ie5 || opera) {

marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {

marginbottom = window.innerHeight
marginright = window.innerWidth
}

var snowsizerange=snowmaxsize-snowminsize

for (i=0;i<=snowmax;i++) {

crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;

snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].sink=sinkspeed*snow[i].size/5

if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left=snow[i].posx
snow[i].style.top=snow[i].posy
}

movesnow()
}

function movesnow() {

for (i=0;i<=snowmax;i++) {

crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy

if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

snow[i].posy=0
}
}

var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {

document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}

if (browserok) {

window.onload=initsnow
}

</script>

<script type="text/javascript">

var snowmaxX=50
var snowcolorX=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF")
var snowtypeX=new Array("Arial","Times")
var snowletterX="-"
var sinkspeedX=0.4
var snowmaxsizeX=40
var snowminsizeX=15
var snowingzoneX=1

var snowX=new Array()
var marginbottomX
var marginrightX
var timerX
var i_snowX=0
var x_mvX=new Array();
var crdsX=new Array();
var lftrghtX=new Array();
var browserinfosX=navigator.userAgent 
var ie5X=document.all&&document.getElementById&&!browserinfosX.match(/Opera/)
var ns6X=document.getElementById&&!document.all
var operaX=browserinfosX.match(/Opera/)  
var browserokX=ie5X||ns6X||operaX

function randommakerX(range) {

randX=Math.floor(range*Math.random())
return randX
}

function initsnowX() {

if (ie5X || operaX) {

marginbottomX = document.body.clientHeight
marginrightX = document.body.clientWidth
}
else if (ns6X) {

marginbottomX = window.innerHeight
marginrightX = window.innerWidth
}

var snowsizerangeX=snowmaxsizeX-snowminsizeX

for (i=0;i<=snowmaxX;i++) {

crdsX[i] = 0;
lftrghtX[i] = Math.random()*15;
x_mvX[i] = 0.03 + Math.random()/10;

snowX[i]=document.getElementById("w"+i)
snowX[i].style.fontFamily=snowtypeX[randommakerX(snowtypeX.length)]
snowX[i].size=randommakerX(snowsizerangeX)+snowminsizeX
snowX[i].style.fontSize=snowX[i].size
snowX[i].style.color=snowcolorX[randommakerX(snowcolorX.length)]
snowX[i].sink=sinkspeedX*snowX[i].size/5

if (snowingzoneX==1) {snowX[i].posx=randommakerX(marginrightX-snowX[i].size)}
if (snowingzoneX==2) {snowX[i].posx=randommakerX(marginrightX/2-snowX[i].size)}
if (snowingzoneX==3) {snowX[i].posx=randommakerX(marginrightX/2-snowX[i].size)+marginrightX/4}
if (snowingzoneX==4) {snowX[i].posx=randommakerX(marginrightX/2-snowX[i].size)+marginrightX/2}

snowX[i].posy=randommakerX(2*marginbottomX-marginbottomX-2*snowX[i].size)
snowX[i].style.left=snowX[i].posx
snowX[i].style.top=snowX[i].posy
}

movesnowX()
}

function movesnowX() {

for (i=0;i<=snowmaxX;i++) {

crdsX[i] += x_mvX[i];
snowX[i].posy+=snowX[i].sink
snowX[i].style.left=snowX[i].posx+lftrghtX[i]*Math.sin(crdsX[i]);
snowX[i].style.top=snowX[i].posy

if (snowX[i].posy>=marginbottomX-2*snowX[i].size || parseInt(snowX[i].style.left)>(marginrightX-3*lftrghtX[i])){
if (snowingzoneX==1) {snowX[i].posx=randommakerX(marginrightX-snowX[i].size)}
if (snowingzoneX==2) {snowX[i].posx=randommakerX(marginrightX/2-snowX[i].size)}
if (snowingzoneX==3) {snowX[i].posx=randommakerX(marginrightX/2-snowX[i].size)+marginrightX/4}
if (snowingzoneX==4) {snowX[i].posx=randommakerX(marginrightX/2-snowX[i].size)+marginrightX/2}

snowX[i].posy=0
}
}

var timerX=setTimeout("movesnowX()",50)
}

for (i=0;i<=snowmaxX;i++) {

document.write("<span id='w"+i+"' style='position:absolute;top:-"+snowmaxsizeX+"'>"+snowletterX+"</span>")
}

if (browserokX) {

window.onload=initsnowX
}

</script>

[lonogod]

And if it's not possible to get these to work simultaneously, is there anyway to combine them? I mean, can more than just one character be randomly dropped from the top of the screen? Thank you!

[grumpyOleMan]

And if it's not possible to get these to work simultaneously, is there anyway to combine them? I mean, can more than just one character be randomly dropped from the top of the screen? Thank you!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>snow</title>
<link rel="stylesheet" href="snow.css">
<script src="snow.js"></script>
</head>
<body>
<p>http://www.webdeveloper.com/forum/showthread.php?270579-Making-two-scripts-co-exist-on-one-page.&</p>
</body>
</html>

Save this as snow.css OR change html file to suit

.snow{
    position: absolute;
	top: -40px;
}

Save this as snow.js OR change html file to suit

var snow = (function () {
	var snowColor, snowType, snow, moveX, crds, leftRight, flakes,
	    numFlakes, maxSz, minSz, speed, zone, height, width, timer, i;
	function rndNum(range) {
	    var rnd = Math.floor(Math.random() * range);
		return rnd;
	}
	function snowTime() {
	    //
		for (i = 0; i < numFlakes; i += 1) {
		    //
			crds[i] += moveX[i];
			snow[i].posy += snow[i].sink;
			snow[i].style.left = (snow[i].posx + leftRight[i] * Math.sin(crds[i])) + 'px';
			snow[i].style.top = snow[i].posy + 'px';
			if (snow[i].posy > height - 2 * snow[i].size || parseInt(snow[i].style.left, 10) > (width - 3 * leftRight[i])) {
			    if (zone === 1) {
				    snow[i].posx = rndNum(width - snow[i].size);
				} else if (zone === 2) {
				    snow[i].posx = rndNum(width / 2 - snow[i].size);
				} else if (zone === 3) {
				    snow[i].posx = rndNum(width / 2 - snow[i].size) + width / 4;
				} else if (zone === 4) {
				    snow[i].posx = rndNum(width / 2 - snow[i].size) + width / 2;
				}
				snow[i].posy = 0;
			}
		}
		timer = setTimeout(function () {snowTime(); }, 60);
	}
	function init(obj) {
	    //
		var snowSzRange, len, flak;
		snowColor = ["#AAAACC", "#DDDDFF", "#CCCCDD", "#F3F3F3", "#F0FFFF"];
		snowType = ["Arial", "Times New Roman", "Courier", "Impact"];
		snow = [];
		moveX = [];
		crds = [];
		leftRight = [];
		flakes = [];
		numFlakes = obj.snowMax;
		maxSz = obj.maxSize;
		minSz = obj.minSize;
		speed = obj.sinkSpeed;
		zone = obj.zone;
		flakes = obj.snowFlakes.split(',');
		if (window.innerHeight) {
		    height = window.innerHeight;
			width = window.innerWidth;
		} else {
		    height = document.body.clientHeight;
			width = document.body.clientWidth;
		}
		timer = null;
		i = 0;
		snowSzRange = maxSz - minSz;
		len = snowColor.length;
		flak = flakes.length;
		for (i; i < numFlakes; i += 1) {
		    document.body.insertAdjacentHTML('beforeEnd', '<span id="span' + i + '" class="snow">' + flakes[rndNum(flak)] + '</span>');
			crds[i] = 0;
			leftRight[i] = Math.floor(Math.random() * 15);
			moveX[i] = 0.03 + Math.random() / 10;
			snow[i] = document.getElementById('span' + i);
			snow[i].size = rndNum(snowSzRange) + minSz;
			snow[i].style.fontSize = snow[i].size + 'px';
			snow[i].style.color = snowColor[rndNum(len)];
			snow[i].sink = speed * snow[i].size / 5;
			if (zone === 1) {
			    snow[i].posx = rndNum(width - snow[i].size);
			} else if (zone === 2) {
			    snow[i].posx = rndNum(width / 2 - snow[i].size);
			} else if (zone === 3) {
			    snow[i].posx = rndNum(width / 2 - snow[i].size) + width / 4;
			} else if (zone === 4) {
			    snow[i].posx = rndNum(width / 2 - snow[i].size) + width / 2;
			}
			snow[i].posy = rndNum(2 * height - height - 2 * snow[i].size);
			snow[i].style.left = snow[i].posx + 'px';
			snow[i].style.top = snow[i].posy + 'px';
		}
		snowTime();
	}
	return {
	    start: init
	};
}());
window.onload = function () {
	snow.start({
	    //object variables used in init function via obj
		snowMax: 50, //visible snow flakes
		snowFlakes: '*,=,x,*,o,8', // types of flakes used
		sinkSpeed: 0.4, //falling rate
		maxSize: 40, // of snow flake
		minSize: 15, //of snow flake
		zone: 1 //1= full page 2=left side 3=centre 4=right
	});
};

[ReFreezed]

The problem I see are these lines:

window.onload=initsnow
window.onload=initsnowX

window.onload can only hold one value. Put those calls in a new function to make it work:

window.onload=function() {
    initsnow();
    initsnowX();
}

[xelawho]

a problem that I see is that you are testing for IE 5 and Netscape 6, which tells me that this is very, very ancient code. Maybe maybe somebody's grandmother out there still has IE 6 but 5? That got superceded in 2001

I'd have a look at your code in a couple of modern browsers before going much further - my versions of Firefox and Chrome don't like it at all. Even IE 8 just makes the snowflakes buzz from side to side on the first line of the screen.

This "snowstorm" code seems to be popular for some reason:
http://epicurus-rsps.net/forum/jscripts/snowstorm.js

[vwphillips]

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

<body>
<div style="height:2000px;" ></div>
<script type="text/javascript">
// Snow Flakes (28-12-2012)
// Modified by - Vic Phillips - http://www.vicsjavascripts.org.uk/


function zxcSnowFlakes(o){
 var z0=0,wsz,sz,x,y,fd=document.createElement('DIV'),ssz=o.snowmaxsize-o.snowminsize,zone=o.snowingzone,f,z0=0;
 f=fd.cloneNode(true);
 f.style.position='absolute';
 f.style.visibility='visible';
 f.style.top=o.snowmax+'px';
 f.innerHTML=o.snowletter;
 fd.style.zIndex='101';
 fd.style.position='fixed';
 fd.style.position='absolute';
 fd.style.visibility='hidden';
 fd.style.left='0px';
 fd.style.top='0px';
 fd.style.width='100%';
 fd.style.height='100%';
 document.body.appendChild(fd);
 wsz=fd.offsetHeight;
 this.fary=[];
 for (;z0<=o.snowmax;z0++){
  f=f.cloneNode(true);
  sz=Math.floor(ssz*Math.random())+o.snowminsize;
  y=this.r(2*wsz-wsz-2*sz);
  x=this.zones(zone,sz,fd);
  this.fary[z0]=[f,0,Math.random()*15,0.03+Math.random()/10,sz,o.sinkspeed*sz/5,x,y];
  f.style.fontFamily=o.snowtype[this.r(o.snowtype.length)];
  f.style.fontSize=sz+'px';
  f.style.left=x+'px';
  f.style.top=y+'px';
  fd.appendChild(f);
 }
 this.max=o.snowmax;
 this.zone=zone;
 this.fd=fd;
 this.movesnow();
}

zxcSnowFlakes.prototype={

 movesnow:function() {
  for (var o=this,wsz=[o.fd.offsetWidth,o.fd.offsetHeight+20],ary=o.fary,z0=0;z0<=o.max;z0++){
   ary[z0][1]+=ary[z0][3];
   ary[z0][7]+=ary[z0][5];
   ary[z0][0].style.left=ary[z0][6]+ary[z0][2]*Math.sin(ary[z0][1])+'px';
   ary[z0][0].style.top=ary[z0][7]+'px';
   if (ary[z0][7]>=wsz[1]-2*ary[z0][4] || parseInt(ary[z0][0].style.left)>(wsz[0]-3*ary[z0][2])){
    ary[z0][6]=o.zones(o.zone,ary[z0][4],o.fd);
    ary[z0][7]=0;
   }
  }
  o.to=setTimeout(function(){ o.movesnow(); },50);
 },

 zones:function(zone,nu,fd) {
  var o=this,x,wsz=[fd.offsetWidth,fd.offsetHeight+20];
  if (zone==1){ x=o.r(wsz[0]-nu); }
  if (zone==2){ x=o.r(wsz[0]/2-nu); }
  if (zone==3){ x=o.r(wsz[0]/2-nu)+wsz[0]/4; }
  if (zone==4){ x=o.r(wsz[0]/2-nu)+wsz[0]/2; }
  return x;
 },

 r:function(nu) {
  return Math.floor(nu*Math.random());
 }

}


new zxcSnowFlakes({
 snowmax:50,
 snowcolor:["#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF"],
 snowtype:["Arial","Times"],
 snowletter:"*",
 sinkspeed:0.4,
 snowmaxsize:40,
 snowminsize:15,
 snowingzone:2
});

new zxcSnowFlakes({
 snowmax:3,
 snowcolor:["#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF"],
 snowtype:["Arial","Times"],
 snowletter:"*",
 sinkspeed:0.4,
 snowmaxsize:120,
 snowminsize:100,
 snowingzone:4
});


</script>
</body>

</html>

[vwphillips]

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

<body>
<div style="height:2000px;" ></div>
<script type="text/javascript">
// Snow Flakes (29-12-2012)
// Modified by - Vic Phillips - http://www.vicsjavascripts.org.uk/


function zxcSnowFlakes(o){
 var z0=0,wsz,sz,x,y,img,fd=document.createElement('DIV'),ssz=o.snowmaxsize-o.snowminsize,zone=o.snowingzone,f,z0=0;
 f=fd.cloneNode(true);
 f.style.position='absolute';
 f.style.visibility='visible';
 f.style.top=o.snowmax+'px';
 f.innerHTML=o.snowletter[this.r(o.snowletter.length)];
 fd.style.zIndex='101';
 fd.style.position='fixed';
 fd.style.position='absolute';
 fd.style.visibility='hidden';
 fd.style.left='0px';
 fd.style.top='0px';
 fd.style.width='100%';
 fd.style.height='100%';
 document.body.appendChild(fd);
 wsz=fd.offsetHeight;
 this.fary=[];
 for (;z0<=o.snowmax;z0++){
  f=f.cloneNode(true);
  fd.appendChild(f);
  sz=Math.floor(ssz*Math.random())+o.snowminsize;
  y=this.r(2*wsz-wsz-2*sz);
  x=this.zones(zone,sz,fd);
  this.fary[z0]=[f,0,Math.random()*15,0.03+Math.random()/10,sz,o.sinkspeed*sz/5,x,y];
  f.style.fontFamily=o.snowtype[this.r(o.snowtype.length)];
   f.style.color=o.snowcolor[this.r(o.snowcolor.length)];
 f.innerHTML=o.snowletter[this.r(o.snowletter.length)];
  img=f.getElementsByTagName('IMG')[0];
  if (img){
   img.style.width=sz+'px';
   img.style.height=sz+'px';
  }
  f.style.fontSize=sz+'px';
  f.style.left=x+'px';
  f.style.top=y+'px';
 }
 this.max=o.snowmax;
 this.zone=zone;
 this.fd=fd;
 this.movesnow();
}

zxcSnowFlakes.prototype={

 movesnow:function() {
  for (var o=this,wsz=[o.fd.offsetWidth,o.fd.offsetHeight+20],ary=o.fary,z0=0;z0<=o.max;z0++){
   ary[z0][1]+=ary[z0][3];
   ary[z0][7]+=ary[z0][5];
   ary[z0][0].style.left=ary[z0][6]+ary[z0][2]*Math.sin(ary[z0][1])+'px';
   ary[z0][0].style.top=ary[z0][7]+'px';
   if (ary[z0][7]>=wsz[1]-2*ary[z0][4] || parseInt(ary[z0][0].style.left)>(wsz[0]-3*ary[z0][2])){
    ary[z0][6]=o.zones(o.zone,ary[z0][4],o.fd);
    ary[z0][7]=0;
   }
  }
  o.to=setTimeout(function(){ o.movesnow(); },50);
 },

 zones:function(zone,nu,fd) {
  var o=this,x,wsz=[fd.offsetWidth,fd.offsetHeight+20];
  if (zone==1){ x=o.r(wsz[0]-nu); }
  if (zone==2){ x=o.r(wsz[0]/2-nu); }
  if (zone==3){ x=o.r(wsz[0]/2-nu)+wsz[0]/4; }
  if (zone==4){ x=o.r(wsz[0]/2-nu)+wsz[0]/2; }
  return x;
 },

 r:function(nu) {
  return Math.floor(nu*Math.random());
 }

}


new zxcSnowFlakes({
 snowmax:50,
 snowcolor:["#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF"],
 snowtype:["Arial","Times"],
 snowletter:["*",
 'A',
 'B',
 '<img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" width="20" height="20" />',
 '<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" width="20" height="20" />',
 '<img src="http://www.vicsjavascripts.org.uk/StdImages/3.gif" width="20" height="20" />'
 ],
 sinkspeed:0.4,
 snowmaxsize:40,
 snowminsize:15,
 snowingzone:1
});
/*
new zxcSnowFlakes({
 snowmax:3,
 snowcolor:["#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF"],
 snowtype:["Arial","Times"],
 snowletter:["*"],
 sinkspeed:0.4,
 snowmaxsize:120,
 snowminsize:100,
 snowingzone:4
});

*/
</script>
</body>

</html>