Jquery mouseleave effect through div's bottom border

Question

This is making me crazy.

Is there a way to fire a mouseleave jquery effect only if leaving the div through its bottom border?

That is, preventing said effect from taking place if the mouse pointer leaves the div through any of the other 3 borders.

I guess it must be a coordinates issue of some sort, but neither position not offset seem like the answer to me.

If something like that can be done, just the tiniest of examples on how to do it would be greatly appreciated.

If a similar question has already been asked (and answered) any redirections will be appreciated as well.

Thanks!

Aiello

Wow, you people really are fast. Amazing. – Aiello

I think so, yes. And I appreciate every answer that has been given. All of them turned out to be extremely useful. – Aiello

Answer 1

How about this:

$("div").mouseleave(function(e){
    var $this = $(this);

    var bottom = $this.offset().top + $this.outerHeight();

   if(e.pageY >= bottom) alert("BOTTOM"); 
});

http://jsfiddle.net/uqcU6/6/

Cherenkov

Actually want to use offset and not position in case the element is within a relative or absolutely positioned element. Answer update. – Cherenkov

You may want to do outerHeight instead of outerWidth because the way you have it now, it only works if it's a square. Forked your fiddle: jsfiddle.net/hJCmB – Euphonize

I've also submitted an edit because outerWidth should be outerHeight, in your jsfiddle this doesn't matter because it's a square, if you'd change it to a rectangle your code would break though. – Tientiena

@Andrew hah, thanks, typing too fast for my brain to keep up I guess. – Cherenkov

I realized that Andrew Peacock is right after getting no results as soon as width and height weren't equal; using outerHeight did the trick. But you pointed me in the right direction, kingjiv, so thank you both. – Aiello

This is amazing. I could even use this as vice versa way. – Sunstroke

Answer 2

For HTML

<div></div>

and CSS

div {
    border:2px dashed lightblue;
    width:200px;
    height:200px;
    margin:20px 0 0 20px;
}

and JavaScript

var divPosition = $('div').position();
var bottom = divPosition.top + $('div').height();
var left = divPosition.left;

$('div').mouseleave(function(e) {
    if (e.pageX > left && e.pageY > bottom) {
        console.log('bottom out');   
    }
});

or demo, a Console output will occur only when mouse leaves the bottom of the <div>

Eileen

I think you want pageY and not clientY. This will only work if the page is scrolled to the top. – Cherenkov

Works like a charm as well. Much appreciated! – Aiello

Answer 3

Simplest solution is to use a wrapper div and assign the mouseleave event to the wrapper.

http://jsfiddle.net/AlienWebguy/TDCgM/

Jugurtha

But that fires when the mouse leaves in all directions. OP wanted to know if it fired when leaving the bottom. – Eileen

Answer 4

The quick solution would be to put a transparent div absolute positioned to the bottom of the element and then listen for a mouseenter on that div to trigger the mouseleave on the parent div.

Chemist

Answer 5

Another solution if you can't add another div would be to take the bottom y coordinates of the div in question. And check to see if the mouse was below that in the mouseleave event. You might have to check x1 < xm < x2, where x1 is the left x coordinate of your div and x2 is the right x coordinate of your div and xm is the x coordinate of your mouse.

@kingjiv beat me to it with a code-example, but the sidechecks might refine the whole thing.

Tientiena

I've trying something like that, but I guess it's not as easy as it seems :) I'll keep it in mind though. Thank you! – Aiello

You can do it with just a event.x > left and event.y > bottom, no need to check right co-ordinate. – Eileen

Answer 6

Add a conditional statement inside your mouseLeave handler that checks whether the mouse is lower than the bottom of the element. If it is, the mouse most likely exited through the bottom border.

example:

$("#yourDiv").mouseleave(function(e){
  if (e.offsetY >= $("#yourDiv").height() ){
    alert("perform the mouse leave action!");
  }

});

Nadabb