jQuery Mouse Direction Plugin

jQuery provides support for standard JS mouse events as well as some custom ones. In jQuery it’s easy to capture whether mouse point has entered in the boundary of an object or left from (mouseenter, mouseleave) or something else happened (like click, dblclick etc). But you are in trouble if you need to capture the direction of your mouse. And it would be fantastic if there was a plugin which can fire custom mouse-direction event on any elements which you can then listen to and bind a listener routine.

I wrote this small plugin (jQuery MouseDirection Plugin) this afternoon to trigger eight custom event for any visible element in the DOM structure. Here is the source code. This plugin registers eight custom directional event like up,down,left,right,top-left,top-right,bottom-left, bottom-right and one more generic event called “mousedirection” where you can capture the direction of the mouse using event object’s “direction” parameters (like event.direction)

/**
 * jQuery Mouse Direction Plugin
 * @version: 1.1
 * @author Hasin Hayder [hasin@leevio.com | http://hasin.me]
 */
(function ($) {
    var options = {};
    var oldx = 0;
    var oldy = 0;
    var direction="";
    $.mousedirection = function (opts) {
        var defaults = {
        };
        options = $.extend(defaults, opts);
        $(document).bind("mousemove", function (e) {
            var activeElement = e.target || e.srcElement;
            if (e.pageX > oldx && e.pageY > oldy) {
                direction="bottom-right";
            }
            else if (e.pageX > oldx && e.pageY < oldy) {
                direction="top-right";
            }
            else if (e.pageX < oldx && e.pageY < oldy) {
                direction="top-left";
            }
            else if (e.pageX < oldx && e.pageY > oldy) {
                direction="bottom-left";
            }
            else if (e.pageX > oldx && e.pageY == oldy) {
                direction="right";
            }
            else if (e.pageX == oldx && e.pageY > oldy) {
                direction="down";
            }
            else if (e.pageX == oldx && e.pageY < oldy) {
                direction="up";
            }
            else if (e.pageX < oldx && e.pageY == oldy) {
                direction="left";
            }
            $(activeElement).trigger(direction);
            $(activeElement).trigger({type:"mousedirection",direction:direction});
            oldx=e.pageX;
            oldy=e.pageY;
        });
    }
})(jQuery)

An here is how you can use it

<head>
    <title>jQuery Mouse Direction Plugin Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.mousedirection.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .container {
            height: 150px;
            margin: 20px;
            padding: 20px;
            width: 300px;
            border: 1px solid #888;
        }
    </style>
<body>
<div class="container">
    Move your mouse over this box
</div>
<script type='text/javascript'>
    $(function () {
        $.mousedirection();
        $(".container").bind("mousedirection", function (e) {
            $(this).html("Mouse Direction: <b>"+e.direction+"</b>");
        });
    });
</script>
</body>

To save from the overwork of running a check whether the mouse has entered on the supplied DOM elements (via selectors) I have located the active element under the mouse pointer and triggered the event only on that object – this was a huge performance boost :)

Download the complete plugin with the example.html from the link below

Download jQuery Mouse Direction Plugin

:) Enjoy!

About these ads

6 thoughts on “jQuery Mouse Direction Plugin

  1. Hi Hasin,

    thank you for that interesting plugin. I testet it, but it wasn’t that precise as I expected. Maybe it would work more precise, if the detection checks every axis for its own.

    In other words, check first if we move on y-axis (‘up’,”,’down’), then x-axis (‘left’,”,’right’) then you could concat this.

  2. As an extension of the original “mousemouse” event, i guess you should publish all the informations provided. In my opionion you should change that one line to:

    $(activeElement).trigger({type:”mousedirection”,origin:e,direction:direction});

    But still: great work!

  3. Your piece of code re-spark my interest in Web. Guess just completed some jQuery based HTML carousel for mouse events. All the code and components works like a charm. What a life (when things work…Ahahaha)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s