SO Qn: jquery-mouseup-on-ios

http://stackoverflow.com/questions/26957080/jquery-mouseup-on-ios

by Venkata Panga

HTML

<script src="http://cdn.rawgit.com/vpanga/jquery.mouse2touch/master/src/jquery.mouse2touch.min.js"></script>
<div id="character"></div>
<div class="ios">
    <div id="ios-left"></div>
    <div id="ios-up"></div>
    <div id="ios-right"></div>
    <div id="ios-down"></div>
</div>

CSS

body {
    overflow:hidden;
    background: lightgreen;
}
#character {
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    position: absolute;
    margin: -16px 0 0 -16px;
    background: url('http://i.imgur.com/EgrwzjE.png') no-repeat;
    background-position: -32px 0px;
    z-index: 50;
}
#character.left-right {
    background-position: 0px -32px;
}
#character.left-stand {
    background-position: -32px -32px;
}
#character.left-left {
    background-position: -64px -32px;
}
#character.right-right {
    background-position: -64px -64px;
}
#character.right-stand {
    background-position: -32px -64px;
}
#character.right-left {
    background-position: -0px -64px;
}
#ios-left {
    position: absolute;
    bottom:130px;
    left: 50px;
    background: black;
    height: 50px;
    width: 50px;
}
#ios-right {
    position: absolute;
    bottom:130px;
    left: 130px;
    background: black;
    height: 50px;
    width: 50px;
}

JavaScript

//Global variables that will be accessed in the functions below
var TimerWalk;			// timer handle for walking
var charStep = 2;		// current step, 1=1st foot, 2=stand, 3=2nd foot, 4=stand
var currentKey = false;	// records the current key pressed
var lockUp = false;		// when lock up, character won't be able to move
var me;					// character object

// Settings:
var walkSpeed = 110;		//ms, animation speed
var walkLength = 7;		//px, move how much px per "walk"

	
$(document).ready(function() {
    
	obstacles = [
	];
	
	me = $('#character');
	//add character state class
	me.addClass('front-stand');
    
    // iControl System
var $div = $('#character');
// Not Working & Buggy.
    $('#ios-left').mousedown(function () {
        clearInterval(TimerWalk);
        TimerWalk = setInterval(function () {
            processWalk('left');
        }, 100);
    }).mouseup(function () {
        $div.stop();
        clearInterval(TimerWalk);
    }).mouse2touch();
    
    $('#ios-right').mousedown(function () {
        clearInterval(TimerWalk);
        TimerWalk = setInterval(function () {
            processWalk('right');
        }, 100);
    }).mouseup(function () {
        $div.stop();
        clearInterval(TimerWalk);
    }).mouse2touch();


//Process Character Walk Function
function processWalk(dir) {

	//increment the charStep as we will want to use the next stance in the animation
	//if the character is at the end of the animation, go back to the beginning
	charStep++;
	if (charStep == 5) 
		charStep = 1;

	//clear current class
	me.removeAttr('class');

	//add the new class
	switch(charStep) {
		case 1: 
			me.addClass(dir+'-stand');
			break;
		case 2: 
			me.addClass(dir+'-right'); 
			break;
		case 3: 
			me.addClass(dir+'-stand'); 
			break;
		case 4: 
			me.addClass(dir+'-left');  
			break;
	}

	
	//move the char
	switch(dir) {
	
		case'front':
			newX = me.position().left;
			newY = me.position().top + walkLength ;
			break;
		
		case'back':
			newX =...