mouse fireworks for firefox

**yadiel** · 08-21-2007, 10:15 PM

Hello I was wondering if someone knows why this code works on IE, but not in Firefox.
thx in advance
<html>
<HEAD>

<SCRIPT TYPE="text/JavaScript">

var ver = navigator.appVersion;
var dom = document.getElementById ? 1 : 0;
var ie5 = (ver.indexOf("MSIE 5") > -1 && dom) ? 1 : 0;
var n = (document.layers);
var ie = (document.all);

var sparksAflyin = 0;
var totalSparks = 0;
var sparksOn = 1;
function initMouseEvents() {
document.onmousedown = mouseDown;
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
}
function mouseDown(e) {
if (sparksOn) {
var mousex = (n) ? e.pageX : event.x+document.body.scrollLeft;
var mousey = (n) ? e.pageY : event.y+document.body.scrollTop;
if (!sparksAflyin) {
for (var k = 0; k <= 9; k++)
eval('SHOW("sDiv'+k+'")');
sparksAflyin = 1;
totalSparks = 0;
for(i = 0;i <= 9; i++)
eval('moveTo('+i+',0,'+mousex+','+mousey+')');
}
}
}
function moveTo(i,j, mousex, mousey){
if (j < eval('anim_'+i+'_x.length') ){
var tempx = eval('anim_'+i+'_x[j]+mousex');
var tempy = eval('anim_'+i+'_y[j]+mousey');
if (ie) {
if(tempy+30 > (document.body.offsetHeight+document.body.scrollTop))
tempy = document.body.offsetHeight+document.body.scrollTop-30;
if(tempx+30 > (document.body.offsetWidth+document.body.scrollLeft))
tempx = document.body.offsetWidth+document.body.scrollLeft-30;
eval('document.all.sDiv'+i+'.style.left = tempx;');
eval('document.all.sDiv'+i+'.style.top = tempy;');
}
if (n) {
eval('document.layers.sDiv'+i+'.left = tempx;');
eval('document.layers.sDiv'+i+'.top = tempy;');
}
j++;
// timeout: 50 = fireworks speed, larger number = slower speed
setTimeout("moveTo("+i+","+j+","+mousex+","+mousey+")",50)
}
else {
eval('HIDE("sDiv'+i+'")');
totalSparks++;
}
if (totalSparks == 10) {
sparksAflyin = 0;
totalSparks = 0;
}
}
function SHOW(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "visible";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "visible";');
}
function HIDE(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "hidden";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "hide";');
}
anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0);
anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80);
anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181);
anim_1_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18);
anim_2_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_3_x=new Array(-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127);
anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189);
anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211);
anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201);
anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288);
anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248);
anim_6_x=new Array(-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274);
anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257);
anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175);
anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68);
anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109);
anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188);
anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);
anim_9_y=new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);

</script>
</HEAD>

<BODY OnLoad="initMouseEvents()">

<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="black">*</font></div>
</div>

</body>
</html>

**jscheuer1** · 08-22-2007, 05:00 AM

Doesn't work in IE either.

**yadiel** · 08-22-2007, 01:07 PM

which version of IE are you useing, it works perfectly with the last one.
Anyway, so far I couldn't find any mistake in the code =( I'm clueless as to why it doesn't works with firefox =(.

**jscheuer1** · 08-22-2007, 02:40 PM

IE 7. If I get a chance later, I will try a rewrite of the code, it is very outdated and includes some questionable coding practices, although the overall concept looks reasonable.

**yadiel** · 08-23-2007, 02:55 AM

thx.

I was checking the error console of firefox, and it throws this line as an undeclared event:
var mousex = (n) ? e.pageX : event.x+document.body.scrollLeft;

then I tried something like this:

var e1 = e || event.window;
and replaced the e for e1. (all that was something I read from a similar case), the result was no error, but still useless X_x hahahah

**jscheuer1** · 08-23-2007, 06:30 AM

It could still be improved, support for document.layers and document.all have been removed, as no one really uses those exclusively any longer. But it will work in just about any modern browser now:

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:black;
}
</style>

<script type="text/javascript">
var fireworks={
timeout: 50, // = fireworks speed, larger number = slower speed (suggested 50)
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 : window.event;
if (f.sparksOn) {
f.mousex = typeof e.pageX=='number'? e.pageX : e.x+f.iecompattest().scrollLeft;
f.mousey = typeof e.pageY=='number'? e.pageY : e.y+f.iecompattest().scrollTop;
if (!f.sparksAflyin) {
f.sparksAflyin = 1;
f.totalSparks = 0;
for(var i = 0; i < 10; i++)
document.getElementById('sDiv'+i).style.visibility = 'visible',
f.moveTo(i,0);
}
}
},
moveTo:function (i,j){
var f=fireworks, j=j;
if (j < f['a'+i]['x'].length) {
var tempx = 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+30 > ww+px? ww+px-30 : tempx;
tempy = tempy+30 > wh+py? wh+py-30 : tempy;
document.getElementById('sDiv'+i).style.left = tempx+'px';
document.getElementById('sDiv'+i).style.top = tempy+'px';
setTimeout(function(){f.moveTo(i,j);}, f.timeout)
}
else {
document.getElementById('sDiv'+i).style.visibility = '';
f.totalSparks++;
}
if (f.totalSparks == 10) {
f.sparksAflyin = 0;
f.totalSparks = 0;
}
},
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)
document.onmousedown = fireworks.mouseDown;
</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>

**yadiel** · 08-24-2007, 12:11 AM

Wow, thx a lot, I'm checking right now the changes, to see all my mistakes.
Thx again =D

Thread: mouse fireworks for firefox

Thread Tools

Search Thread

mouse fireworks for firefox

Bookmarks

Bookmarks

Posting Permissions