Document fire works script

**dcr33** · 07-12-2011, 10:11 AM

1) Script Title: Document fire works script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex3/fireworks.htm

3) Describe problem: The script is not working in my Firefox browser 5.
I have pasted the stylesheet code to the <head> section of my page and <div> tags to the <body> section of my document,but still it doesn't work.

I insert the full code here for display -

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!--

/*
Document firework script (By Matt Gabbert, mgabbert@usrtoday.com, http://www.nolag.com)
Permission granted to Dynamic Drive to feature script in archive
For full source and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//set Interval between each firework display, 
var intervals=2000
var sparksOn     = true;
var speed        = 40;
var power        = 3;

//Dont change these values-------
var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
var ns=(document.layers);
var ie=(document.all);
var ns6=(document.getElementById&&!document.all);
var sparksAflyin = false;
var allDivs      = new Array(10);
var totalSparks  = 0;
//-------------------------------

function initAll(){
	if(!ns && !ie &&!ns6){
	sparksOn = false;
	return;
	}
setInterval("firework()",intervals)

if (ns)
	document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
	for(dNum=0; dNum<7; ++dNum){
		if(ie)
			allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
                else if (ns6)
                        allDivs[dNum]=document.getElementById('sDiv'+dNum).style;
		else
			allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
	}
}

function firework(){
//below code detects the browser dimenions
if (ie){
documentWidth=document.body.clientWidth
documentHeight=document.body.clientHeight
leftcorner=document.body.scrollLeft
topcorner=document.body.scrollTop
}
else if (ns||ns6){
documentWidth=window.innerWidth
documentHeight=window.innerHeight
leftcorner=pageXOffset
topcorner=pageYOffset

}
//below code randomly generates a set of coordinates that fall within the dimension
randomx=leftcorner+Math.floor(Math.random()*documentWidth)
randomy=topcorner+Math.floor(Math.random()*documentHeight)


	if(sparksOn){
		if(!sparksAflyin){
			sparksAflyin=true;
			totalSparks=0;
			for(var spark=0;spark<=6;spark++){
				dx=Math.round(Math.random()*50);
				dy=Math.round(Math.random()*50);
				moveTo(spark,randomx,randomy,dx,dy);
			}
		}
	}
}

function moveTo(i,tempx,tempy,dx,dy){
	if(ie){
		if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))
			tempy=document.body.offsetHeight+document.body.scrollTop-80;
		if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))
			tempx=document.body.offsetWidth+document.body.scrollLeft-80;
	}
	else if(ns6){
		if(tempy+80>(window.innerHeight+pageYOffset))
			tempy=window.innerHeight+pageYOffset-80;
		if(tempx+80>(window.innerWidth+pageXOffset))
			tempx=window.innerWidth+pageXOffset-80;
	}
	if(tempx>-50&&tempy>-50){
		tempx+=dx;tempy+=dy;	
		allDivs[i].left=tempx;
		allDivs[i].top=tempy;
		dx-=power;dy-=power;
		setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)
	}
	else
		++totalSparks
	if(totalSparks==7){
		sparksAflyin=false;
		totalSparks=0;
	}
}
window.onload=initAll
//End-->
</script>

<style>
#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;}
#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red; z-index:10;}
#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue; z-index:11;}
#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange; z-index:12;}
#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow; z-index:13;}
#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen; z-index:14;}
#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver; z-index:15;}
</style>
</head>

<body>
<div id="sDiv0">*</div>
<div id="sDiv1">*</div>
<div id="sDiv2">*</div>
<div id="sDiv3">*</div>
<div id="sDiv4">*</div>
<div id="sDiv5">*</div>
<div id="sDiv6">*</div>

</body>
</html>

Please tell me now where is my mistake & how to get the effect? Is there anything wrong in the way i have inserted the codes in the <head> and <body> sections??

**jscheuer1** · 07-12-2011, 11:38 AM

The script is for quirks mode only. Replace this:

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

with:

Code:

<html>

Or, I found this fireworks script in my archives. It works with a valid DOCTYPE like you have there:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fireworks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#sparks div {
position:absolute;
visibility:hidden;
font-family:arial black, sans-serif;
color:white;
font-size:125%;
}
body {
background-color:black;
}
</style>

<script type="text/javascript">
var fireworks={
timeout: 70, // = fireworks speed, larger number = slower speed (suggested 70)
colors:['#ff4433', '#77ff77', 'yellow', 'hotpink', '#dddddd', 'lightblue'],
method: 'onload',
sparksAflyin : 0,
totalSparks : 0,
sparksOn : 1,
iecompattest:function (){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
},
mouseDown:function (e) {
var f=fireworks, e=e&&e[0]? e : e? e : window.event;
if (f.sparksOn) {
if(e)
var x = e&&e[0]? e[0] : typeof e.pageX=='number'? e.pageX : e.x+f.iecompattest().scrollLeft,
y = e&&e[1]? e[1] :  typeof e.pageY=='number'? e.pageY : e.y+f.iecompattest().scrollTop;
else
var x=Math.random()*(f.get_dims()[0]-f.get_dims()[0]/3)+f.get_dims()[0]/6+f.get_dims()[2],
y=Math.random()*(f.get_dims()[1]/3)+200+f.get_dims()[3];
if (!f.sparksAflyin||(e&&e[0])) {
f.mousex = x, f.mousey = y;
f.sparksAflyin = 1;
f.totalSparks = 0;
for(var i = 0, colr=f.colors[Math.floor(Math.random()*(f.colors.length+1))]; i < 10; i++)
document.getElementById('sDiv'+i).style.visibility = 'visible',
document.getElementById('sDiv'+i).style.color = colr? colr : f.colors[Math.floor(Math.random()*f.colors.length)],
f.moveTo(i,0,!(e&&e[0]));
if (!(e&&e[0])&&(f.tog=!f.tog))
f.timer=setTimeout(function(){new f.mouseDown([x,y]);},Math.random()*300);
}
/*else
e.timer=setTimeout(function(){new f.mouseDown([x,y]);},10);*/
}
},
get_dims:function(){
var f=fireworks, ww=window.innerWidth?window.innerWidth:f.iecompattest().offsetWidth,
wh=window.innerHeight?window.innerHeight:f.iecompattest().offsetHeight,
px=typeof pageXOffset=='number'?pageXOffset:f.iecompattest().scrollLeft,
py=typeof pageYOffset=='number'?pageYOffset:f.iecompattest().scrollTop;
return [ww,wh,px,py];
},
moveTo:function (i,j){
var f=fireworks, j=j, el=document.getElementById('sDiv'+i);
if (j < f['a'+i]['x'].length) {
var xm=!arguments[2]||Math.round(Math.random())?1:-1,
tempx = xm*f['a'+i]['x'][j]+f.mousex,
tempy = f['a'+i]['y'][j++]+f.mousey,
ww=window.innerWidth?window.innerWidth:f.iecompattest().offsetWidth,
wh=window.innerHeight?window.innerHeight:f.iecompattest().offsetHeight,
px=typeof pageXOffset=='number'?pageXOffset:f.iecompattest().scrollLeft,
py=typeof pageYOffset=='number'?pageYOffset:f.iecompattest().scrollTop;
tempx = tempx+el.offsetWidth > ww+px? ww+px-el.offsetWidth : tempx;
tempy = tempy+el.offsetHeight > wh+py? wh+py-el.offsetHeight : tempy;
el.style.left = tempx+'px';
el.style.top = tempy+'px';
setTimeout(function(){f.moveTo(i,j);}, f.timeout)
}
else {
el.style.visibility = '';
f.totalSparks++;
}
if (f.totalSparks == 10) {
f.sparksAflyin = 0;
f.totalSparks = 0;
if (f.method=='onload')
setTimeout('fireworks.mouseDown()', Math.max(Math.random()*3000, 1500));
}
},
a0:{x:[20,20,10,0,0,0,0,0,0,0,0,0],
y:[-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80]},
a1:{x:[20,20,17,36,60,78,90,92,93,98,108,120,133,152,181],
y:[-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253]},
a2:{x:[20,20,2,3,4,5,6,7,8,9,10,12,13,15,18],
y:[-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253]},
a3:{x:[-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127],
y:[-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189]},
a4:{x:[-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211],
y:[-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201]},
a5:{x:[-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288],
y:[-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248]},
a6:{x:[-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274],
y:[-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257]},
a7:{x:[20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175],
y:[-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68]},
a8:{x:[-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109],
y:[-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188]},
a9:{x:[-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287],
y:[-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273]}};
if (document.getElementById)
if (fireworks.method=='onclick')
document.onmousedown = fireworks.mouseDown;
else if (fireworks.method=='onload')
onload=function(){
setTimeout('fireworks.mouseDown()', 10);
}
</script>
</head>
<body>
<div id="sparks">
<div id="sDiv0">*</div>
<div id="sDiv1">*</div>
<div id="sDiv2">*</div>
<div id="sDiv3">*</div>
<div id="sDiv4">*</div>
<div id="sDiv5">*</div>
<div id="sDiv6">*</div>
<div id="sDiv7">*</div>
<div id="sDiv8">*</div>
<div id="sDiv9">*</div>
</div>
</body>
</html>

**dcr33** · 07-13-2011, 06:11 PM

Ya thanks its now working.

Thread: Document fire works script

Thread Tools

Search Thread

Document fire works script

Bookmarks

Bookmarks

Posting Permissions