• Disable "gesture" to disable the touchpad. Extensions for controlling gestures in Chrome and Firefox

    February 25, 2008 at 07:46 pm Programming mouse gestures
    • JavaScript

    Many Opera and FireFox users know about the existence of so-called Mouse Gestures (for FF there is a plugin of the same name) - mouse gestures to which the browser reacts by performing various actions (such as opening a new window, bookmarks, back, forward, etc., etc.). etc.), the only drawback of this feature is that there is no interaction with the site, and I decided to write a small library that will help developers add similar functionality to their site...

    On at the moment The library understands only 8 simple gestures:

    • Top - hold down the mouse button and move the cursor up 50-200 pixels (by default) and release, the offset along the X axis should be at least two times smaller. than along the Y axis
    • Bottom - move the cursor down
    • Right
    And their derivatives
    • Top-Left - the offset along the X and Y axes should not differ by more than twice
    • Top-Right
    • Bottom-Left
    • Bottom-Right
    To connect the library you will need to add the following code to your page:

    Next, copy the following code:

    // use jQuery for bind function to event

    // set parameters
    navigation.minX = 50;
    navigation.minY = 50;
    navigation.maxX = 300;
    navigation.maxY = 300;
    // callback functions
    navigation.TopLeft = function (X,Y) ( );
    navigation.Top = function (X,Y) ( );
    navigation.TopRight = function (X,Y) ( );
    navigation.Left = function (X,Y) ( );
    navigation.Right = function (X,Y) ( );
    navigation.BottomLeft = function (X,Y) ( );
    navigation.Bottom = function (X,Y) ( );
    navigation.BottomRight = function (X,Y) ( );


    This is a template for our “gestures”, the first two lines are necessary in order to attach our two functions to the global events mousedown and mouseup (the jQuery library is used). The next 4 lines indicate the parameters of gestures, i.e. limits within which they will operate. Next comes the declaration of 8 callback functions; they take absolute offsets along the X and Y axes as parameters.

    In order to exclude false positives of our functions, it is better to bind them to the pressed “Ctrl” key (the “Ctrl” key code is 17, if you want to change it, see all the codes on the page http://unixpapa.com/js/key.html):

    $(window).keydown(function(event)(
    switch (event.keyCode) (
    case 17:
    $(document).mousedown(navigation.mousedown);
    $(document).mouseup(navigation.mouseup);
    break;
    }
    });

    switch (event.keyCode) (
    case 17:


    break;
    }
    });

    And this is what the code from my example looks like:

    function mouseGestures())(
    $(window).keydown(function(event)(
    switch (event.keyCode) (
    //…
    // different keys do different things
    // Different browsers provide different codes
    // see here for details: unixpapa.com/js/key.html
    //…
    case 17:
    $(document).mousedown(navigation.mousedown);
    $(document).mouseup(navigation.mouseup);
    break;
    }
    });
    $(window).keyup(function(event)(
    switch (event.keyCode) (
    case 17:
    $(document).unbind("mousedown");
    $(document).unbind("mouseup");
    break;
    }
    });

    Navigation.maxX = 300;
    navigation.maxY = 300;
    navigation.TopLeft = function (X,Y) ( select($("div#left div.top"),Math.abs(X-Y)) );
    navigation.Top = function (X,Y) ( select($("div#center div.top"),Y) );
    navigation.TopRight = function (X,Y) ( select($("div#right div.top"),Math.abs(X-Y)) );
    navigation.Left = function (X,Y) ( select($("div#left div.middle"),X) );
    navigation.Right = function (X,Y) ( select($("div#right div.middle"),X) );
    navigation.BottomLeft = function (X,Y) ( select($("div#left div.bottom"),Math.abs(X-Y)) );
    navigation.Bottom = function (X,Y) ( select($("div#center div.bottom"),Y) );
    navigation.BottomRight = function (X,Y) ( select($("div#right div.bottom"),Math.abs(X-Y)) );
    }
    function select(el,k) (
    var speed = 1500;
    switch (true) (
    case (k