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
    Aug 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Removing touch detection on mobile devices for carousel

    I have a carousel which can be found here : http://hutchcreative.co.uk/rod/. On mobile you can swipe through the images instead of using the carousel controls. Although this is a nice feature, it is causing issues scrolling down the rest of the page, as the images are full width and height.

    I need a way to block/remove this so that it forces the user to use the carousel controls instead.

    Here is the jquery that produces the carousel:

    Code:
    jQuery( document ).ready( function( $ ) {
    	
    	var wind = $( window ),
    		html = $( "html" ),
    		touch = html.hasClass( "touch" ),
    		ie8 = html.hasClass( "ie8" ),
    		ie = html.hasClass( "ie" ),
    		picks = $( "#picks" ),
    		li = picks.find( "li" ),
    		skip = picks.find( ".skip" ),
    		hold = true,
    		interval
    	
    	li
    	.eq( 0 )
    	.addClass( "current" )
    	
    	ph_picks_autocolor()
    	
    	li
    	.imagesLoaded()
    	.progress( function( e, i ) {
    		
    		if ( ie8 )
    			return
    			
    		$( i.img )
    		.parents( "li" )
    		.css( "background-image", "url(" + i.img.src + ")" )	
    							
    	} )
    	.always( function() {
    		
    		picks.addClass( "ready" )
    				
    		ph_picks_release()
    		
    	} )
    	
    	function ph_picks( side ) {
    		
    		if ( hold )
    			return
    					
    		hold = true,
    		current = li.filter( ".current" )
    		
    		if ( side == "next" ) {
    			next = current.next( "li" ).length ? current.next( "li" ) : li.eq( 0 )			
    		}
    		else {
    			next = current.prev( "li" ).length ? current.prev( "li" ) : li.filter( ":last" )
    		}	
    		
    		current.removeClass( "current" )
    	
    		next.addClass( "current" )
    		
    		ph_picks_autocolor( next )
    		
    		ph_picks_release()
    		
    	}
    	
    	function ph_picks_auto() {
    		
    		if ( interval )
    			clearInterval( interval )
    		
    		interval = setInterval( function() {
    			
    			ph_picks( "next" )
    		
    		}, 10000 )
    		
    	}
    	
    	function ph_picks_release() {
    		
    		if ( ie ) {
    			
    			hold = false
    			
    			ph_picks_auto()	
    			
    		}
    		else {
    			
    			setTimeout( function() {
    				
    				hold = false
    				
    				ph_picks_auto()	
    				
    			}, 800 )	
    			
    		}
    		
    	}
    	
    	function ph_picks_autocolor( current ) {
    		
    		current = current ? current : li.filter( ".current" )
    		
    		skip.css( "border-color", current.children( "article" ).css( "color" ) )
    		
    	}
    	
    	wind.on( "keydown", function( e ) {
    		
    		if ( e.keyCode == 39 || e.keyCode == 37 ) {
    			
    			ph_picks( e.keyCode == 39 ? "next" : "prev" )
    			
    			e.preventDefault()
    			
    		}
    				
    	} )
    	
    	if ( ! touch ) {
    	
    		skip
    		.on( "click", function( e ) {
    			
    			ph_picks( "next" )
    					
    			e.preventDefault()
    			
    		} )
    		
    		skipLeft = picks.find("#skipLeft"),
    		skipRight = picks.find("#skipRight")
    		
    		skipLeft
    		.hammer()
    		.on( "tap", function( e ) {
    
    			ph_picks( "prev" )
    
    			e.gesture.preventDefault()
    
    		} )
    		skipRight
    		.hammer()
    		.on( "tap", function( e ) {
    
    			ph_picks( "next" )
    
    			e.gesture.preventDefault()
    
    		} )
    	
    	}
    	else {
    		
    		picks
    		.hammer()
    		.on( "dragstart", function( e ) {
    			
    			e.gesture.preventDefault()
    			
    		} )
    		.on( "dragend", function( e ) {
    			
    			var i = e.gesture
    						
    			if ( i.distance < 40 )
    				return
    			
    			if ( i.direction == "left" ) {
    				ph_picks( "next" )				
    			}
    			else if ( i.direction == "right" ) {
    				ph_picks( "prev" )
    			}
    			
    		} )
    		
    		skipLeft = picks.find("#skipLeft"),
    		skipRight = picks.find("#skipRight")
    		
    		skipLeft
    		.hammer()
    		.on( "tap", function( e ) {
    
    			ph_picks( "prev" )
    
    			e.gesture.preventDefault()
    
    		} )
    		skipRight
    		.hammer()
    		.on( "tap", function( e ) {
    
    			ph_picks( "next" )
    
    			e.gesture.preventDefault()
    
    		} )
    		
    		/*skip
    		.hammer()
    		.on( "tap", function( e ) {
    					
    			ph_picks( "next" )
    					
    			e.gesture.preventDefault()
    								
    		} )*/
    		
    	}	
    		
    } );
    Thanks!

  • #2
    New Coder
    Join Date
    Sep 2011
    Posts
    63
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Could be this section? Try commenting it out and see what happens

    Code:
    picks
    		.hammer()
    		.on( "dragstart", function( e ) {
    			
    			e.gesture.preventDefault()
    			
    		} )
    		.on( "dragend", function( e ) {
    			
    			var i = e.gesture
    						
    			if ( i.distance < 40 )
    				return
    			
    			if ( i.direction == "left" ) {
    				ph_picks( "next" )				
    			}
    			else if ( i.direction == "right" ) {
    				ph_picks( "prev" )
    			}
    			
    		} )
    		
    		skipLeft = picks.find("#skipLeft"),
    		skipRight = picks.find("#skipRight")
    		
    		skipLeft
    		.hammer()
    		.on( "tap", function( e ) {
    
    			ph_picks( "prev" )
    
    			e.gesture.preventDefault()
    
    		} )
    		skipRight
    		.hammer()
    		.on( "tap", function( e ) {
    
    			ph_picks( "next" )
    
    			e.gesture.preventDefault()
    
    		} )
    Nice looking site btw


  •  

    Tags for this Thread

    Posting Permissions

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