dcsimg
www.webdeveloper.com
Results 1 to 15 of 15

Thread: FireFox mouse position

  1. #1
    Join Date
    Sep 2005
    Posts
    21

    FireFox mouse position

    This code works in IE but in FireFox the alert just says 0,0. How do I ge thte mouse position when in FireFox?

    Code:
    <html>
    <head>
    	<title></title>
    	<script>
    		onload=
    		function(e)
    		{
    			if(!e) var e = window.event;
    			var x = e.clientX + document.body.scrollLeft;
    			var y = e.clientY + document.body.scrollTop;
    			alert(x + ', ' + y);
    		}
    	</script> 
    </head>
    <body>
    
    </body>
    </html>

  2. #2
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Look at this page for Mouse Position, you will see the check you need to do.

    http://www.quirksmode.org/js/events_properties.html

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  3. #3
    Join Date
    Sep 2005
    Posts
    21
    I tried that and it still wouldn't work in FireFox.

    I did discover this:

    Code:
    	<script>
    		document.oncontextmenu=getCoors;
    		function getCoors(e)
    		{
    			if(!e){var e = window.event;}
    			var x = e.screenX;
    			var y = e.screenY;
    			alert(x + ', ' + y);
    			return false;
    		}
    
    	</script>
    Works pretty much everywhere (except FF/Gecko)
    But...

    Code:
    	<script>
    		window.oncontextmenu=getCoors;
    		function getCoors(e)
    		{
    			if(!e){var e = window.event;}
    			var x = e.screenX;
    			var y = e.screenY;
    			alert(x + ', ' + y);
    			return false;
    		}
    
    	</script>
    Works only in FF(Gecko)

    Why does FF(Gecko) need window.oncontextmenu and why does everything else want document.oncontextmenu????
    Last edited by jbezanson; 01-05-2006 at 02:54 PM.

  4. #4
    Join Date
    Oct 2005
    Posts
    79
    Code:
    <html>
    <head>
    <script type="text/javascript">
    	
    	var IE = false;
    	if (navigator.appName == "Microsoft Internet Explorer"){IE = true}
    	if (!IE){document.captureEvents(Event.MOUSEMOVE)}
    	document.onmousemove = getMouseXY;
    
    	function getMouseXY(m){
    
      		if (IE)	{
    			 var tmpX = event.clientX;
      			 var tmpY = event.clientY;
    			}	
     		else 	{
        			 var tmpX = m.pageX;
    			 var tmpY = m.pageY;
      			}  
    		if (!document.body.scrollTop)
    			{
    			 var iL = document.documentElement.scrollLeft;	
    			 var iV = document.documentElement.scrollTop;
    			}
    		else 	{
    			 var iL = document.body.scrollLeft;	
    			 var iV = document.body.scrollTop;	
    			}
      		document.forms[0].MouseX.value = tmpX + iL;
      		document.forms[0].MouseY.value = tmpY + iV;
      	}
    
    </script>
    </head>
    <body>
    <table height="1200">
    <td align=bottom>
    <form name"anyName">
    X: <input type="text" name="MouseX" size="4" readonly><br>
    Y: <input type="text" name="MouseY" size="4" readonly>
    </form>
    </td>
    </table>
    </body>
    </html>
    Last edited by Ancora; 01-05-2006 at 03:49 PM.

  5. #5
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Ancora,

    The script you posted really should not rely on browser detection, you need to use object detection since a browser is able to spoof itself as another browser and the code will fail.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  6. #6
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Try these cross browser mouse position functions.

    Code:
    function mouseX(evt) {if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return null;}
    function mouseY(evt) {if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return null;}
    Stephen

  7. #7
    Join Date
    Oct 2005
    Posts
    79
    Alien51: Another aHole who's all mouth and no code.
    Here's some mouth for you:
    Post code or shut your mouth.

    If people want links, they use Google.

    Oh, and KMA.
    Last edited by Ancora; 01-05-2006 at 03:55 PM.

  8. #8
    Join Date
    Oct 2005
    Posts
    79
    fellgall:
    Your "snippet" doesn't work in IE compatibility mode.

    But then again, you're only here, and on every other coding forum for the sole purpose of trying to drive traffic to About.com, because that's how you get paid. You're not here to help, rather to exploit.

    All mouth. No code.

  9. #9
    Join Date
    Sep 2005
    Posts
    21
    felgall your code doesn not work in FireFox or any browser running on the Gecko engine...it is time to update those functions...plus I have seen that answer on a number of forums and I have been to that article on about.com...it does not work!!!! it just says evt has no properties (FireFox only recognizes the evt from window, while Ie only recognizes evt from document.

    I agree I don't like detecting browsers but sometimes it is necessary

    Thanks ancora...with a little modification your code shoud do the trick.

  10. #10
    Join Date
    Jan 2006
    Posts
    48
    Well, you're very polite, aren't you?

  11. #11
    Join Date
    Sep 2005
    Posts
    21
    Is there a way to do this through object detection instead of browser detection???

  12. #12
    Join Date
    Dec 2005
    Location
    Washington, DC
    Posts
    228
    This is what I use

    Code:
    var isIE = document.all;
    var mouseX = 0;
    var mouseY = 0;
    
    function getMouseXY(e)
    { 
      if (!e) e = window.event;
      if (e)
      { 
      	mouseX = isIE ? (e.clientX + document.body.scrollLeft) : e.pageX;
      	mouseY = isIE ? (e.clientY + document.body.scrollTop) : e.pageY;
      }
    }
    
    document.onmousemove = getMouseXY;
    "God didn't create the world in seven days, he pulled an all-nighter on the sixth."

  13. #13
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    This seems to work in every browser I've tried it in

    var x, y;
    function show_coords(event)
    {
    x=event.clientX;
    y=event.clientY;

    alert("X="+ x +",Y="+ y);
    }

    Just be sure to pass event in the function call.

  14. #14
    Join Date
    Sep 2005
    Posts
    21
    Quote Originally Posted by Selrach
    This is what I use

    Code:
    var isIE = document.all;
    var mouseX = 0;
    var mouseY = 0;
    
    function getMouseXY(e)
    { 
      if (!e) e = window.event;
      if (e)
      { 
      	mouseX = isIE ? (e.clientX + document.body.scrollLeft) : e.pageX;
      	mouseY = isIE ? (e.clientY + document.body.scrollTop) : e.pageY;
      }
    }
    
    document.onmousemove = getMouseXY;
    Thanks this works great as long as I don't need to call anything else or call it differently. eg
    Code:
    document.onmousemove = function(){getMouseXY();}
    -- this fails, not sure why but I got what I needed thanks.

  15. #15
    Join Date
    Apr 2008
    Posts
    26
    I'm not going to offer any solutions, but I think that for someone to rip on other peoples code just because you can't figure out how to integrate it into your site is the perfect example why these forum boards are full of idiots. real programmers don't wan't to listen to you whine
    jbezanson and Ancora....do you have any original code?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center