Difficulty in writing mobile touch plugin

[alexward1981]

Hi guys,

I've been using jQuery for about 8 months now and I love it, however some parts of it still puzzle me. I am attempting to code a plugin which will add the ability to swipe between slides on a page (using a touch enabled device obviously) I have managed to get it working (almost) perfectly on the x axis but for some reason the Y axis is giving me gip.

Sliding down works perfectly but when I try to slide back up the slides either don't slide up enough or fly off the screen!

Here is my code (the touch events are created earlier in the code):

var touching = function(element, direction){
	var dir = direction;
	var slider = new Slider();
	var touchOrigin = -1;
	var touchEnd;
	var touchY;
	var wrapper = document.getElementById(element);
	wrapper.addEventListener(events.start, function(event) {
		var touch = event.touches[0];
		touchOrigin = touch.pageX;
		touchOriginY = touch.pageY;
	}, false);
	wrapper.addEventListener(events.during, function(event) {
		event.preventDefault();
		var touch = event.touches[0];
		var getDir = function(dir) {
			switch (dir) {
				case 'y' : 
					touchY = touchOriginY - touch.pageY;			
					touchEnd = 0;
				break;
				case 'x' :
					touchY = 0;
					touchEnd = touchOrigin - touch.pageX;
				break;
				case 'off' :
					touchEnd = 0;
					touchY = 0;
				break;
			}
		}
		getDir(dir);
		//$('<div class="touchEvent"> Touch x: ' + touchEnd + ', y: ' + touchY +' (origin: '+ touchOrigin +'x'+touchOriginY +')</div>').appendTo(wrapper); //adds diagnostic information to page, useful for testing
		if ((touchOrigin != -1) && (slider.currentSlide >= 1 || slider.currentSlide <= slider.slideCount -2)) { 
			if (touchEnd > 0) {
				slider.slide.eq(slider.currentSlide)
				.css('left', (touch.pageX - touchOrigin)+"px"); 	
			}
			if (touchY > 0) {
				slider.slide.eq(slider.currentSlide)
				.css('top', (touch.pageY - touchOriginY)+"px"); 	
			}
			if (touchEnd > 0) {
				if (slider.currentSlide <= slider.slideCount -2) slider.slide.eq(slider.currentSlide +1)
				.css('left', (touch.pageX - touchOrigin + slider.slideWidth)+"px"); 	
			} else {
				 if (slider.currentSlide >= 1) slider.slide.eq(slider.currentSlide -1)
				 .css('left', (touch.pageX - touchOrigin - slider.slideWidth)+"px"); 	
			}
			if (touchY > 0) {
				if (slider.currentSlide <= slider.slideCount -2) slider.slide.eq(slider.currentSlide +1)
				.css('top', (touch.pageY - touchOriginY + slider.slideHeight)+"px"); 	
			} else {
				 if (slider.currentSlide >= 1) slider.slide.eq(slider.currentSlide -1)
				 .css('top', (touch.pageY - touchOriginY - slider.slideHeight)+"px"); 	
			}
		} else {
			getDir(dir);
		}
	}, false);
	document.addEventListener(events.end, function(event) {
		var touch = event.touches[0];
		if (touchY < 100) { // scroll on the x axis
			if (touchEnd >= 200 && slider.currentSlide <= slider.slideCount -2) {	
				slider.slide.eq(slider.currentSlide)
				.animate({"left": "-="+ (slider.slideWidth - touchEnd +200) +"px"}, 'fast');
				slider.slide.eq(slider.currentSlide+1)
				.animate({"left": "0px"}, 'fast');
				slider.currentSlide++;
			} else if (touchEnd <= -200 && slider.currentSlide >= 1){
				slider.slide.eq(slider.currentSlide)
				.animate({"left": "+="+ (slider.slideWidth + touchEnd +200) +"px"}, 'fast');
				slider.slide.eq(slider.currentSlide-1)
				.animate({"left": "0px"}, 'fast');
				slider.currentSlide--;
			} else {
				slider.slide.eq(slider.currentSlide).css('left', 0); 
				if (touchEnd > 0) {
					slider.slide.eq(slider.currentSlide +1)
					.css('left', slider.slideWidth +100 +'px'); 
				} else {
					slider.slide.eq(slider.currentSlide -1)
					.css('left', slider.slideWidth +100 +'px'); 
				}
			}
		}
		if (touchEnd < 200) { // scroll on the y axis
			if (touchY >= 100 && slider.currentSlide <= slider.slideCount -2) {
				slider.slide.eq(slider.currentSlide)
				.animate({"top": "-="+ (slider.slideHeight - touchY +100) +"px"}, 'fast');
				slider.slide.eq(slider.currentSlide+1)
				.animate({"top": "0px"}, 'fast');
				slider.currentSlide++;
			} else if (touchY <= -100 && slider.currentSlide >= 1) {
				slider.slide.eq(slider.currentSlide)
				.animate({"top": "+="+ (slider.slideHeight + touchY + 100) +"px"}, 'fast');
				slider.slide.eq(slider.currentSlide-1)
				.animate({"top": "0px"}, 'fast');
				slider.currentSlide--;
			} else {
				slider.slide.eq(slider.currentSlide).css('top', 0); 
				if (touchY > 0) {
					slider.slide.eq(slider.currentSlide +1)
					.css('top', slider.slideHeight +100 +'px'); 
				} else {
					slider.slide.eq(slider.currentSlide -1)
					.css('top', slider.slideHeight +100 +'px'); 
				}
			}
		}
		touchOrigin = -1;
		getDir('off') // disables touch events
	}, false);
}

Thanks in advance for your help, it's much appreciated.

[alexward1981]

Ok I've narrowed the problem down to one part of the code:

if (touchEnd < 200) { // scroll on the y axis
			if (touchY >= 100 && slider.currentSlide <= slider.slideCount -2) {	
				slider.slide.eq(slider.currentSlide)
				.animate({"top": "-="+ (slider.slideHeight - touchY +100) +"px"}, 'fast');
				slider.slide.eq(slider.currentSlide+1)
				.animate({"top": "0px"}, 'fast');
				slider.currentSlide++;
			} else if (touchY <= -100 && slider.currentSlide >= 1){
				slider.slide.eq(slider.currentSlide)
				.animate({"top": "+="+ (slider.slideHeight + touchEnd +100) +"px"}, 'fast');
				slider.slide.eq(slider.currentSlide - 1)
				.animate({"top": "0px"}, 'fast');
				slider.currentSlide--;
			} else {
				slider.slide.eq(slider.currentSlide).css('top', 0); 
				if (touchY > 0) {
					slider.slide.eq(slider.currentSlide +1)
					.css('top', slider.slideHeight +100 +'px'); 
				} else {
					slider.slide.eq(slider.currentSlide -1)
					.css('top', slider.slideHeight +100 +'px'); 
				}
			}
		}

It seems to be sliding the wrong slide in this part:

slider.slide.eq(slider.currentSlide - 1)
.animate({"top": "0px"}, 'fast');
slider.currentSlide--;

But I can't for the life of me work out why.