CODEWITHSUNDEEP
jquery
Jepser Bernardino
Jepser Bernardino

Reputation: 1372

How to trigger an event depending on the mouse position

I'm trying to get a slider animate when the mouse is near to the bottom, and when the mouse leave this panel the panel hides.

Now here is my code, and it works; but I think there is a clever solution.

function mouseWindow(){
    $(document).mousemove(function(e){
        $('#status').html(e.pageX +', '+ e.pageY);
        var _this = this;
        if((windowHeight - e.pageY) < 50){
          $(_this).unbind('mousemove');
          $('.footer-gallery').stop(true, true).animate({ bottom : 0}, 500).mouseleave(function(){
              $(this).animate({ bottom : -180 }, 500, function(){
                  mouseWindow();
              });
          });
        }
    }); //mousemove
    }
    mouseWindow();

Here is my code live... Thanks! http://markup.royalworkshop.com/realplaza/markup-inner.html

Upvotes: 1

Views: 394

Answers (2)

mrtsherman
mrtsherman

Reputation: 39872

Try something like this. Basically you create an element and use it as a trigger. I think this is far cleaner and allows you to control your trigger element using CSS

http://jsfiddle.net/MADA6/

html

<div id="trigger">Trigger</div>
<div id="footer">Content</div>

css

div#trigger {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    border: 1px solid black;
    z-index: 2;
}
div#footer {
    position: fixed;
    bottom: 0;
    display: none;
    width: 100%;
    height: 100px;
    background: blue;
    z-index: 1;
}

jquery

$('#trigger').mouseenter(function() {
    console.log('trigger');
    $('#footer').fadeIn();
});

$('#footer').mouseleave(function() {
    console.log('leave');
    $(this).fadeOut();
});

Upvotes: 2

Phrogz
Phrogz

Reputation: 303136

Simpler:

Place one (or more) transparent objects where you want them (hint: CSS) and detect mouseover events for them. With this you can even make them visible for debugging, have them dynamically change size based on the layout, and more.

Upvotes: 0

Related Questions