Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Difficulty in writing mobile touch plugin

    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):

    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.

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I've narrowed the problem down to one part of the code:

    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:

    Code:
    slider.slide.eq(slider.currentSlide - 1)
    .animate({"top": "0px"}, 'fast');
    slider.currentSlide--;
    But I can't for the life of me work out why.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •