[RESOLVED] Cursor postition in Firefox

shaneH

Here's the code I am testing with:

<html>
<head>
<style type="text/css">
#m2		{position: absolute; border: 2px solid #000000; background: #CCCCCC;}
</style>

<script type="text/javascript" language="javascript">
function showcalevent(obj) { 

var scrollp = [0, 0];

if (typeof document.documentElement.scrollTop != "undefined" && document.documentElement.scrollTop > 0 ){
scrollp = [document.documentElement.scrollLeft, document.documentElement.scrollTop];
}
else if (typeof document.body.scrollTop != "undefined" ){
scrollp = [document.body.scrollLeft, document.body.scrollTop];
}
else if (typeof window.pageYOffset != "undefined" ){
scrollp = [window.pageXOffset, window.pageYOffset];
}

var cursorp = [0, 0];

if(typeof event.pageX != "undefined" && typeof event.x != "undefined"){
cursorp[0] = event.pageX;
cursorp[1] = event.pageY;
}
else{
cursorp[0] = event.clientX + scrollp[0];
cursorp[1] = event.clientY + scrollp[1];
}

var leftoffset = (cursorp[0] - 200);
obj.style.top = cursorp[1] + "px";
obj.style.left = leftoffset + "px";
}
function hidecalevent(obj) { 
	obj.style.top= "-200px";
	obj.style.left= "-200px";
}
</script>
</head>
<body>
<div style="top: -200px; left: -200px;" id="m2">
	<br>
	<br>
	We can place tons of content here<br>
	<br>
	<br>	
</div>
<center>
<div id="Mmenu" onMouseover="showcalevent(m2)" onMouseout="hidecalevent(m2)">
	<b>Menu</b>
</div>
</center>
</body>
</html>

This code works in every browser I have except FireFox. I must be missing something. I have broke it down as far as to set the "var cursorp = [0, 0];" to have actual values and that was the only way it worked. But no matter how simplely I try to get the cursors position in Firefox it will not get it, I even tried event.x and event.y.

Anybody got any ideas on this?

shaneH

Anybody got any ideas at all on this.

I have googled so much I think its about to break.

I looked though all my javascript books (6 or so, some dating back 8+ years). I have looked at an untold number of forums and several different tutorials and scripts, many of them were identical. And everything I saw worked for what it was designed for but I when I take and modify it for my particulars it doesn't work.

I am guessing it is some small thing that I over looked.

shaneH

Ok, well I went crazy and started trying any goofy thing I could imagine and I found the solution. Just so everyone knows this isn't explained anywere, at least not in context.

Here's the new code.

<html>
<head>
<style type="text/css">
#m2		{position: absolute; border: 2px solid #000000; background: #CCCCCC;}
</style>

<script type="text/javascript" language="javascript">
function showcalevent(obj, event) { 

var agent = navigator.userAgent.toLowerCase();

var scrollp = [0, 0];

if (typeof document.documentElement.scrollTop != "undefined" && document.documentElement.scrollTop > 0 ){
scrollp = [document.documentElement.scrollLeft,
			document.documentElement.scrollTop];
}
else if (typeof document.body.scrollTop != "undefined" ){
scrollp = [document.body.scrollLeft,
			document.body.scrollTop];
}
else if (typeof window.pageYOffset != "undefined" ){
scrollp = [window.pageXOffset,
			window.pageYOffset];
}

var cursorp = [0, 0];

if(typeof event.pageX != "undefined" && typeof event.x != "undefined"){
cursorp[0] = event.pageX - 400;
cursorp[1] = event.pageY - 80;
}
else if (agent.indexOf("gecko") != -1){
cursorp[0] = event.clientX + scrollp[0] - 200;
cursorp[1] = event.clientY + scrollp[1] + 10;
}
else{
cursorp[0] = event.clientX + scrollp[0] - 400;
cursorp[1] = event.clientY + scrollp[1] - 100;
}

obj.style.top = cursorp[1] + "px";
obj.style.left = cursorp[0] + "px";
obj.style.display = "block"
}
function hidecalevent(obj, event) { 
	obj.style.top = "-300px";
	obj.style.left = "-300px";
	obj.style.display = "none"
}
</script>
</head>
<body>
<div style="top: -200px; left: -200px;" id="m2">
	<br>
	<br>
	We can place tons of content here<br>
	<br>
	<br>	
</div>
<center>
<div id="Mmenu" onMouseover="showcalevent(m2, event)" onMouseout="hidecalevent(m2, event)">
	<b>Menu</b>
</div>
</center>
</body>
</html>

Now the functions are a slight bit different from my earlier post but they show how I am using them on the site. Now the testing for the browser is just there for different positioning settings.

The point to note is "onMouseover" and onMouseout" now have the "event" in the brackets like such: onMouseover="showcalevent(m2, event)". And the "event" is then picked up by the functions like so: showcalevent(obj, event).

I am guessing that the actual event has to be passed for Firefox (mozilla) to actually get the cursors position. In all reality I don't know why it worked but it does.

I hope my explanation helps someone else.

Any critique is welcome.