ansaurus

Question

Detect when mouse leaves via top of page with jquery

Answer 1

A:

I used another technic, almost works for all browsers. The trick is using $("body") or $(window).

$(window) do not work for IE, but $("body") works partially for FF as the body might not fill the whole window.

Here's the full page code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;&lt;script&gt;
  var mouseX = 0;
  var mouseY = 0;
  var theFrame;
$(function() {
    theFrame = $("body"); //$(window) for non-IE
      theFrame.mousemove( function(e) {
     //horizontal distance from edge
     mouseX = Math.min(theFrame.width() - e.pageX, e.pageX);
     //vertical distance from top
     mouseY = e.pageY;
     $("#mx").html(mouseX);
     $("#my").html(mouseY);
      });
    theFrame.mouseout(function() {
     if(mouseY<=mouseX)
      $("#in_out").html("out-top");
     else
      $("#in_out").html("out");
    });
    theFrame.mouseover(function() {
     $("#in_out").html("in");
    });
});
</script> 
</head>
<body>
<span id="in_out"></span>
<br />Hor: <span id="mx"></span>
<br />Ver: <span id="my"></span>

</body>
</html>

o.k.w 2009-10-24 11:52:15

Note: in_out, mx, my are for debugging purpose only :P

o.k.w 2009-10-24 12:18:10

Answer 2

+4 A:

The problem appears if your window scrolls down, add a bunch of <br/>s to your page and scroll down one line and you'll see it.

So instead of looking to see if e.pageY <=1, subtract out the scrollTop:

if (e.pageY - $(window).scrollTop() <= 1)
    {    
    // do something
    }

fudgey 2009-10-24 14:10:37

Thanks a lot, that fixed it

Lobe 2009-10-25 03:14:15

ansaurus

tags:

views:

answers:

Detect when mouse leaves via top of page with jquery

related questions