event not working with firefox and NS7

O

Oscar Monteiro

the Code below captures the Mouse move event, while event isn´t defined
anywhere it still works in IE only, how can I define the event handler so it
can work with other browsers, Firefox mostly.
-------snipped code-------------
Ymouse = -50;
Xmouse = -50;

function Mouse(evnt) {
Ymouse=event.y-20;
Xmouse=event.x;
}
----------------------------------

the hole code:
<SCRIPT type="text/javascript">

Image0 = new Image();
Image0.src = "sailormoon.jpg";
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();


function Mouse(evnt) {
Ymouse=event.y-20;
Xmouse=event.x;
}
document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos = Ymouse;
Xpos = Xmouse;
Speed = Math.random()*4+1;
Cstep = 0;
Step = Math.random()*0.1+0.05;
grow = 8;
nsSize = Math.random()*15+5;
rate = Math.random()*0.5+0.1;
}

document.write('<div style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i = 0; i < Amount; i++) {
document.write('<img id="si'+i+'" src="'+Image0.src+'"
style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');

function MouseBubbles() {
var hscrll=document.body.scrollTop;
var wscrll=document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed * Math.sin(270 * Math.PI / 180);
sx = Speed * Math.cos(Cstep * 4);
Ypos += sy;
Xpos += sx;
if (Ypos < -40) {
Ypos = Ymouse;
Xpos = Xmouse;
Speed = Math.random() * 6 + 4;
grow = 8;
nsSize = Math.random() * 15 + 5;
}

document.getElementById("si"+i).style.pixelLeft = Xpos + wscrll;
document.getElementById("si"+i).style.pixelTop = Ypos + hscrll;
document.getElementById("si"+i).style.width = grow;
document.getElementById("si"+i).style.height = grow;

grow += rate;
Cstep += Step;
if (grow > 24) grow = 25;
}
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();

</script>

wish you all a nice weekend , and many thank for the help
in the previous posts.

Best Regards
 
F

Fred Oz

Oscar said:
the Code below captures the Mouse move event, while event isn´t defined
anywhere it still works in IE only, how can I define the event handler so it
can work with other browsers, Firefox mostly.
-------snipped code-------------
Ymouse = -50;
Xmouse = -50;

function Mouse(evnt) {
Click to expand...

Add this line right after the function declaration:

var e = evnt || window.event;

then just use "e" rather than "event".
Ymouse=event.y-20;
Xmouse=event.x;
Click to expand...

becomes:

Ymouse = e.y-20;
Xmouse = e.x;

You can also add support for older Netscape with:

Ymouse = e.y-20 || e.layerY-20;
Xmouse = e.x || e.layerX;

Untested, but see how you go.
 
O

Oscar Monteiro

Fred Oz said:
Add this line right after the function declaration:

var e = evnt || window.event;

then just use "e" rather than "event".


becomes:

Ymouse = e.y-20;
Xmouse = e.x;

You can also add support for older Netscape with:

Ymouse = e.y-20 || e.layerY-20;
Xmouse = e.x || e.layerX;

Untested, but see how you go.
Click to expand...

Thanks for helping me deffining the event handler Fred still lacks something
to track mouse movement .
Thanks anyway for the help given.
 
F

Fred Oz

Oscar Monteiro wrote:
[...]
Thanks for helping me deffining the event handler Fred still lacks something
to track mouse movement .
Thanks anyway for the help given.
Click to expand...

There was more than one issue, modified code below (original
commented out mostly)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>mouse move</title>
</head>
<body>
<span id="theSpot"></span>

<SCRIPT type="text/javascript">
Image0 = new Image();
// Image0.src = "sailormoon.jpg";
Image0.src = "a.jpg";
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();

docBody = document.getElementsByTagName('body')[0];
// debug
// spot = document.getElementById('theSpot');

function Mouse(event) {
var e = event || window.event;
// Ymouse= e.y-20;
// Xmouse= e.x;
// clientX/Y works in IE too, is OR needed still?
Ymouse= e.clientY-20 || e.y-20;
Xmouse= e.clientX || e.x;
}

document.onmousemove = Mouse;
for (i = 0; i < Amount; i++) {
Ypos = Ymouse;
Xpos = Xmouse;
Speed = Math.random()*4+1;
Cstep = 0;
Step = Math.random()*0.1+0.05;
grow = 8;
nsSize = Math.random()*15+5;
rate = Math.random()*0.5+0.1;
}

var aDiv = document.createElement('div');
aDiv.style.position = 'absolute';
aDiv.style.top = '0';
aDiv.style.left = '0';

var bDiv = document.createElement('div');
bDiv.style.position = 'relative';
for (i = 0; i < Amount; i++) {
var oImg = document.createElement('img');
oImg.id = 'si' + i;
oImg.src = Image0.src;
oImg.style.position = 'absolute';
oImg.style.top = '0';
oImg.style.left = '0';
oImg.style.filter = 'alpha(opacity=90)';

bDiv.appendChild(oImg);
}

aDiv.appendChild(bDiv);
docBody.appendChild(aDiv);

/*
// replaced with DOM methods above
document.write('<div style="position:absolute;top:0px;'
+ 'left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
document.write('<img id="si'+i+'" src="'+Image0.src+'" '
+ 'style="position:absolute;top:0px;left:0px;filter:'
+ 'alpha(opacity=90)">');
}

document.write('</div></div>');
*/

function MouseBubbles() {
var hscrll=document.body.scrollTop;
var wscrll=document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed * Math.sin(270 * Math.PI / 180);
sx = Speed * Math.cos(Cstep * 4);
Ypos += sy;
Xpos += sx;

// debug
// if (i<5)
// spot.innerHTML = Ypos.join(' ') + '\n' + Xpos.join(' ');

if (Ypos < -40) {
Ypos = Ymouse;
Xpos = Xmouse;
Speed = Math.random() * 6 + 4;
grow = 8;
nsSize = Math.random() * 15 + 5;
}

// pixelLeft not supported by Firefox, just use left
// (works in IE too)
// document.getElementById("si"+i).style.pixelLeft = Xpos
// + wscrll;
// document.getElementById("si"+i).style.pixelTop = Ypos
// + hscrll;
document.getElementById("si"+i).style.left = Xpos + wscrll;
document.getElementById("si"+i).style.top = Ypos + hscrll;
document.getElementById("si"+i).style.width = grow;
document.getElementById("si"+i).style.height = grow;

grow += rate;
Cstep += Step;

if (grow > 24) grow = 25;
}
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();
</script>
</body>
</html>
 
F

Fred Oz

Fred said:
Oscar Monteiro wrote:
[...]
Thanks for helping me deffining the event handler Fred still lacks
something to track mouse movement .
Thanks anyway for the help given.
Click to expand...

There was more than one issue, modified code below (original
commented out mostly)
Click to expand...
[...]


Tested and working in Safari too.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help: Javascript not working in Firefox "event not defined" 1
Help With a Script 5
firefox doesn't like the IE specific 'event' identifier and just quits running script 5
Why does this use all cpu in FireFox? 4
will some body help me.? 0
My movement of banner is not working in IE6, works in IE7 and Firefox, and Safari 1
Drag&drop Javascript freezing in Firefox 2 1
focus after onchange event and regex test not working 3

Members online

Total: 36 (members: 1, guests: 35)
Robots: 203

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top