Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the ot-apollo domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home3/achieve/public_html/knowledgebase/wp-includes/functions.php on line 6131

Warning: Cannot modify header information - headers already sent by (output started at /home3/achieve/public_html/knowledgebase/wp-includes/functions.php:6131) in /home3/achieve/public_html/knowledgebase/wp-includes/feed-rss2.php on line 8
Events – Knowledge https://knowledge.achieveee.com Thu, 08 Dec 2016 12:58:24 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://knowledge.achieveee.com/wp-content/uploads/2016/05/cropped-favicon-32x32.png Events – Knowledge https://knowledge.achieveee.com 32 32 Bind/Unbind Mouse Move, Direction Keys and Touch Swipe events from JavaScript https://knowledge.achieveee.com/knowledge_base/bindunbind-mouse-move-direction-keys-and-touch-swipe-events-from-javascript/?utm_source=rss&utm_medium=rss&utm_campaign=bindunbind-mouse-move-direction-keys-and-touch-swipe-events-from-javascript https://knowledge.achieveee.com/knowledge_base/bindunbind-mouse-move-direction-keys-and-touch-swipe-events-from-javascript/#respond Thu, 08 Dec 2016 12:58:24 +0000 http://knowledge.achieveee.com/?post_type=knowledge_base&p=2495 1. Touch Swipe Events for Touch Devices

var xDown = null;
var yDown = null;
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

function handleTouchStart(evt) {
    xDown = evt.touches[0].clientX;
    yDown = evt.touches[0].clientY;
};

function handleTouchMove(evt) {
    if (!xDown || !yDown) {
        return;
    }

    var xUp = evt.touches[0].clientX;
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if (Math.abs(xDiff) > Math.abs(yDiff)) {
        if (xDiff > 0) {
        // swipe right direction
        }
        else {
        // swipe left direction
        }
    }
    else {
        if (yDiff > 0) {
        // swipe down direction
        }
        else {
        // swipe up direction
        }
    }

    /* reset values */
    xDown = null;
    yDown = null;
};

Unbind event:

$('body').unbind('touchmove');

2. Direction Arrow Keys Binding

// set key binding for direction arrows
$(document).keydown(function(e) {
    switch(e.which) {
        case 37:
        // left direction
        break;

        case 38:
        // up direction
        break;

        case 39:
        // right direction
        break;

        case 40:
        // down direction
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

Unbind event:

$(document).unbind('keydown');

3. Mouse move direction events

var last_position = {};

$(document).on('mousemove', function (event) {
    //check to make sure there is data to compare against
    if (typeof(last_position.x) != 'undefined') {

        //get the change from last position to this position
        var deltaX = last_position.x - event.clientX,
        deltaY = last_position.y - event.clientY;

        //check which direction had the highest amplitude and then figure out direction by checking if the value is greater or less than zero
        if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
            // mouse move left
        }
        else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
            // mouse move right
        }
        else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
            // mouse move up
        }
        else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
            // mouse move down
        }
    }

    //set the new last position to the current for next time
    last_position = {
        x : event.clientX,
        y : event.clientY
    };
});

Unbind event:

$(document).off('mousemove');

 

]]>
https://knowledge.achieveee.com/knowledge_base/bindunbind-mouse-move-direction-keys-and-touch-swipe-events-from-javascript/feed/ 0