...

View Full Version : Javascript mouse position working in IE, not FF!



ikilledsanta
01-09-2007, 11:37 PM
Here is an example of my JavaScript:

function rolesopen()
{
schedinfo.style.visibility='visible';
document.getElementById('schedinfo').innerHTML='Roles works.';
schedinfo.style.left = document.body.scrollLeft + window.event.clientX - 125;
schedinfo.style.top = document.body.scrollTop + window.event.clientY - 215;
}

function rolesclose()
{
schedinfo.style.visibility='hidden';
}

and it's link in HTML...

<span onMouseover="javascript: rolesopen()" onMouseout="javascript: rolesclose()" class="fade">Roles Posted</span>

Basically, it puts a little div box right above the link you are on. It works flawlessly in IE, but in FF it doesn't move! It appears and disappears fine, and changes text great, but for some reason it won't take the mouse positioning. I tested the "schedinfo.style.top" part by making it equal to 100 and it worked, so I know it HAS to be something in "document.body.scrollTop + window.event.clientY - 215", or something that's NOT in that should be.

I have a Firefox extension that tells me what it thinks is wrong with the code, and it says "window.event" has no properties, and highlights this line:
"schedinfo.style.left = document.body.scrollLeft + window.event.clientX - 125;"

I tried changing "clientX" to "pageX" as I found on a few other sites, but that did nothing.

Please, help me asap. The deadline for entrance is Friday. I read your sticky on not doing homework, but this isn't really homework, and I understand how it works, enough to get it to work for IE, but I need it to work on multiple browsers.

TripperTreats
01-09-2007, 11:56 PM
The problem is that some browsers (FF) don't automatically assign events like you would want them. You just need a minor change though:


function rolesOpen (e) {
if (!e) e = window.event;
schedinfo......
}

ikilledsanta
01-10-2007, 12:13 AM
The problem is that some browsers (FF) don't automatically assign events like you would want them. You just need a minor change though:


function rolesOpen (e) {
if (!e) e = window.event;
schedinfo......
}

Thanks, I tried it, but I still get the same error :(.

david_kw
01-10-2007, 12:14 AM
I think you also need to change the onmouseover attribute in span, or something similar.

onmouseover="rolesopen(event);"

david_kw

ikilledsanta
01-10-2007, 12:29 AM
I think you also need to change the onmouseover attribute in span, or something similar.

onmouseover="rolesopen(event);"

david_kw

Still nothing! I tried every combination of your guy's answer, and a few of my own, and still nothing! I'm starting to get worried.

felgall
01-10-2007, 06:11 AM
Different browsers use completely different fields to store the mouse position so it isn't just the way that the event is passed that needs changing. See http://javascript.about.com/library/blmousepos.htm for info on how to get the mouse position in different browsers along with cross browser code to do it.

david_kw
01-10-2007, 06:32 AM
It might help if you showed your new code. Anyway, here is a test so you can see the mouse event is in fact working in IE and FF.

http://www.exfer.net/test/onmouseover.html



<html>
<head>
<title>Mouse Move Event</title>
<script type="text/javascript">
function doIt(s) {
var adiv = document.getElementById("adiv");
adiv.innerHTML = s;
}

function rolesopen (e) {
if (!e) e = window.event;
doIt("type (x, y) = " + e.type + " (" + e.clientX + ", " + e.clientY + ")");
}

function rolesclose()
{
doIt("");
}
</script>
</head>
<body>
<div>
<span onMouseover="rolesopen(event);" onMouseout="rolesclose()" class="fade">Roles Posted</span>
<br />
<div id="adiv"> </div>
</div>
</body>
</html>


david_kw

Kor
01-10-2007, 11:29 AM
You must consider as well the possible scroll position of the document, if any:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
html, body{
margin:0;
padding:0;
}
-->
</style>
<script type="text/javascript">
var posx;var posy;
function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
//compliant mode vs. quirk mode
var sLeft=document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft;
var sTop=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
posx=ev.clientX+sLeft;
posy=ev.clientY+sTop;
}
else{return false}//old browsers
document.getElementById('mydiv').firstChild.data='X='+posx+' Y='+posy;
}
document.onmousemove=getMouse;
</script>
</head>
<body>
<div id="mydiv">&nbsp;</div>
</body>
</html>

ikilledsanta
01-11-2007, 05:33 AM
It might help if you showed your new code. Anyway, here is a test so you can see the mouse event is in fact working in IE and FF.

http://www.exfer.net/test/onmouseover.html



<html>
<head>
<title>Mouse Move Event</title>
<script type="text/javascript">
function doIt(s) {
var adiv = document.getElementById("adiv");
adiv.innerHTML = s;
}

function rolesopen (e) {
if (!e) e = window.event;
doIt("type (x, y) = " + e.type + " (" + e.clientX + ", " + e.clientY + ")");
}

function rolesclose()
{
doIt("");
}
</script>
</head>
<body>
<div>
<span onMouseover="rolesopen(event);" onMouseout="rolesclose()" class="fade">Roles Posted</span>
<br />
<div id="adiv"> </div>
</div>
</body>
</html>


david_kw

Holy crap! It worked! Thanks so much, this was the last day to work on it.

ed34222
01-18-2007, 02:31 AM
That Works fine until the user zooms to something other than 100% :confused:


You must consider as well the possible scroll position of the document, if any:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
html, body{
margin:0;
padding:0;
}
-->
</style>
<script type="text/javascript">
var posx;var posy;
function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
//compliant mode vs. quirk mode
var sLeft=document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft;
var sTop=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
posx=ev.clientX+sLeft;
posy=ev.clientY+sTop;
}
else{return false}//old browsers
document.getElementById('mydiv').firstChild.data='X='+posx+' Y='+posy;
}
document.onmousemove=getMouse;
</script>
</head>
<body>
<div id="mydiv">&nbsp;</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum