iPad touch and swipe for websites

published by omar on Sat, 03/12/2011 - 19:08

The project here is to develop a tablet touch and swipe functioning web site, to see this in action from your tablet you could click this link http://www.omarscott.com/omarstuff/touch/index.php . This is not a tutorial just an introduction to the project -- you will have to go through and implement the source to really get working with this. Now lets get started.

To view this script in action go to http://www.omarscott.com/touches/index.php from your tablet, preferably an Ipad but works on some android devices as well.

Experience :

Intermidiate Javascript (jQuery), Intermediate HTML, Experienced CCS skills, or just being a copy and paste coder will suffice.

Meat and Potatoes :
Click here to see this code in action ""video input""

With the advent of touch technology web developers have had a hard time developing interactivity for these devices such as iPad and android tablets and with so many makeshift API's it is hard to find a good platform to run off of. Well we are all in luck I have taken the time to develop touch javascript functionality from the ground up -- this means less code less headaches and allot more function.

I will not really dive into the html - the code I am using here is from my current iPad portfolio site and all source files are here for you to download. The code I have written for this site has all been included in the source files (with heavy comments) so in this text I will only cover the meat and potatoes, where in contrast the sample files have my full site code including video, populated scrolls and contact forms etc. My site has light PHP and I used jQuery to build all touch functionality.

The scrolling is launching off of a div called scroller. The scroller div will house the scrollable items and its width will be set by javascript after javascript reads in all .scrollitem widths on a page. Scroller2 was implemented only to fix positioning bugs i experienced with scrollitems. The scroller div was given a css property of overflow hidden so that the browser would not make its entire width visible.

The HTML

<div id="scroller">
      <ul id="scroller2">
        <li class ="scrollitem">
        
	"place all your mark here and you could duplicate as many scrollitems as you want.  The javascript will automatically read in all your li.scrollitem (s) and appropriately create the widths" 
        
        </li>
        <li class ="scrollitem"></li>
        <li class ="scrollitem"></li>
      </ul>
</div>

The CSS


#scroller{

	font-family:lubFontbold;	
	height:368px;
	overflow:hidden;
	position:relative;
	color:#000;
    
}


#scroller2{

	margin:0px;
	padding:0px;
	width:100%;
	position:relative;
    
}


#scroller2 li{

	display:inline;
	float:left;
	width:1024px;
	height:368px;
	position:relative;
    
	}

The jQuery
Again the source files will have alot more comments and sript -- this here is just a light breakdown of the scroller.

$(document).ready(function(){
Here we grab the widths and positions of all our scrollitems and push them into an array
and then run some logic to create a marker system similar to iPad so we know where we are at in the scroller.


scrollerliWidth = $('#scroller ul li').width();  
$('#scroller ul li').each(function(index) {
itemPneg .push($(this).offset().left - $(this).offset().left - $(this).offset().left);
totalScrollPixels = scrollerliWidth * itemPneg.length*2;

$('#scroller').css({"width":+totalScrollPixels+"px"});

$('#marker').append('<li class = "circle"></li>'); 
circleM.push($('.circle'));  
circleM[0].css({"background-color":"rgba(255,255,255, 0.7)"}); 
	
markerWidthcount = markerWidthcount+12;
var setMarkerxpos = 512 + markerWidthcount/2 -markerWidthcount;  
$("#marker").css({"width":markerWidthcount+"px"});
$("#marker").css({"margin-left":"auto"});
$("#marker").css({"margin-right":"auto"});

});

more JQuery
On touch start we prevent default behaviors, get the origin where the user touched and begin our css translate3d

	
$('#scroller').bind('touchstart', function(e){
TTstart = new Date().getTime();   
if(e.originalEvent.touches.length<2){      
e.preventDefault();       
originT = e.originalEvent.touches[0].pageX; 
currentP = $('#scroller').offset().left;     
 currentT = e.originalEvent.touches[0].pageX - originT + currentP;  
$('#scroller').css({"-webkit-transform":"translate3d("+currentT+"px,0,0)"});    

}

more JQuery
on touch move we run a little math to figure where to move our scroller then pass that variable in to our css property so translate3d will move with our user's finger.

$('#scroller').bind('touchmove', function(e){   
if(e.originalEvent.touches.length<2){
e.preventDefault();  
currentT = e.originalEvent.touches[0].pageX - originT + currentP; 
endingT = e.originalEvent.touches[0].pageX;  
$('#scroller').css({"-webkit-transform":"translate3d("+currentT+"px,0,0)"}); 
}});

more JQuery
On touch end A lot is going down here so it would hard to go ahead and explain, but thank God for source files -- no? basically run logic to figure out how long our user's finger was on the screen as well as how many pixels the user's finger swiped across the screen. We are also going through scrollitems in an array to see where the user is then based on finger swipe go to the previous slide or the next one, a greater explanation of this lies in the comments for this source file. Finally we run a transition on scroller to go to the appropriate scroller once the user lift their finger.

$('#scroller').bind('touchend', function(e){
TTelapsed = new Date().getTime() - TTstart; 
if(e.originalEvent.touches.length<2){  
$('#fingerswipe').css({"opacity":"0.50"});
if(TTelapsed>=500){  
$('#scroller').addClass('scroller-transisition-500'); 
}
else if(TTelapsed>=400 &&TTelapsed<500 ){
$('#scroller').addClass('scroller-transisition-400'); 
}else {
$('#scroller').addClass('scroller-transisition-300'); 
};
	

		
if(e.originalEvent.touches.length<2){   
lastIndex = itemPneg[itemPneg.length - 1];  
if($('#scroller').offset().left > 0){  
finishP = 0;	
}else if($('#scroller').offset().left < lastIndex  ){ 
finishP = lastIndex;
}else{
if(endingT != null){  
if(endingT - originT > 20){  
	currentItem--;
}
		
if(endingT - originT <  -20){   
currentItem++;
}

if(currentItem > itemPneg.length -1){  
currentItem =  itemPneg.length -1;};
if(currentItem < itemPneg.length - itemPneg.length){  
currentItem =  itemPneg.length-itemPneg.length;};
finishP = itemPneg [currentItem]; 
}
		

	}
//set all marker items to dark color
$('.circle').each(function(index) {
$(this).css({"background-color":"rgba(80,80,80, 1.0)"}); 

//set current marker item that correspnds to slide to white
if(index == currentItem){
$(this).css({"background-color":"rgba(255,255,255, 0.7)"});
	}
});


//set the arrows on the finger icon based on the available slides
if(currentItem <= 0){ $('#fingerswipe').css({"background-position":"0px"});	}
else if(currentItem >= itemPneg.length - 1){$('#fingerswipe').css({"background-position":"-166px"});

}else{$('#fingerswipe').css({"background-position":"-83px"});	}

// after all logic we animate to user desired position
$('#scroller').css({"-webkit-transform":"translate3d("+finishP+"px,0,0)"});


	}
	}
	
});

In Closing I did not go in depth here on the site but if you download the source files all the information you need as well as details are placed within the code itself. Happy coding and this blog is open for comments. I will help out as much as I can.

Source Files:

touch_for_websites.zip

Other blogs

iPad touch and swipe for websites

The project here is to develop a tablet touch and swipe functioning web site, to...

iPad touch and swipe for menus

With the advent of touch technology web developers have had a hard time...

Mobile web & app design

Mobile web and app design changes the surface of commercial design as the web did...

Creating a digital presentation

The Kicker A mock up, a flash movie and a powerpoint file walk to into a meeting...

Spiderman on Broadway Flash takeover.

Inception To kick off their launch on broadway the folks over at Spiderman were...

Web app or regular app?

Picture this, you work for a company that sells computer parts and you decided that...

My custom built RC truck Roadster

I decided to build this RC truck, because I’ve yet to see an on-road truck in the...

Main menu

You are here

iPad touch and swipe for websites

Other blogs