CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Giuseppe Pes
Giuseppe Pes

Reputation: 7912

How to trigger an event when the mouse hits the bottom of the page

I am trying to implement a menu bar that works similarly to the windows task bar. One of property that I want to emulate is hide/show when the mouse goes in the bottom of the page. How can I detect when the mouse is in the bottom of the page?

First of all, is there a plugin for JQuery or similar libraries which already implement this action?

A possible solution is to use a invisible div in the bottom which triggers the event when the mouse gets in. I was wondering if there is a better solution than this.

Upvotes: 3

Views: 2446

Answers (2)

T J
T J

Reputation: 43156

If using jQuery is not a problem

window.onmousemove= function(e){
 if(e.y>= $(document).height()-10)
    alert('you did hit the bottom!');
}

Will do. check this Fiddle

note: i've given a 10px breathing space

Update: Fiddle with a taskbar like div - Updated Fiddle

Upvotes: 7

Vishal Nair
Vishal Nair

Reputation: 2191

You can do something like this -- >

JQUERY

$(document).ready(function(){
  $(document).mousemove(function(event){
    var docheight = $( document ).height() - 10; //subtracted with 10 just to be safe with checking the condition below

    if(event.pageY > docheight){
        alert("you have reached socument bottom");
         //write your code here
    }

  });
});

JSFIDDLE DEMO

Upvotes: -1

Related Questions