iPad touch and swipe for menus

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

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.

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 :
Our goal here is to develop a navigational menu for a tablet web site, to see this in action from your tablet you could click this link http://www.omarscott.com/touches/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.

Click here to see this code in action ""video input""

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 nav here is a very simple development but needs some explaining. Since tablets do not translate mouse events at 100% -- creating touch menu items is imperative if you want to have a touch functioning website that incorporates user swipes and touches. I have created som javascript code that will run some logic when a user touches, moves and end interaction on a menu item.

The menu HTML
Just created a standard html menu

 <ul id="navigation">
    <li id="index"></li>
    <li id="portfolio"></li>
    <li id="about"></li>
    <li id="contact"></li>
  </ul>

The CSS
Here we have basic CSS elements with a webkit transition to be sure that my button will animate to another state on touch and page load.


#navigation {
	padding:0px;
	margin:0px;
	height:33px;
	-webkit-box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.90);
}
#navigation li {
	display:inline;
	position:relative;
	height:33px;
	float:left;
	background-position: 0px 0px;
	-webkit-transition-property: translate3d;
	-webkit-transition: background-position 300ms ease-out 20ms;
}
#navigation li a {
	display:block;
	height:33px;
}


#navigation #index {
	background-image:url(../images/nav_home.png);
	width:258px;
	z-index:500;
	margin-right:1px;
}
#navigation #portfolio {
	background-image:url(../images/nav_portfolio.png);
	width:262px;
	z-index:1500;
	margin-left:-9px;
}
#navigation #about {
	background-image:url(../images/nav_about.png);
	width:269px;
	z-index:1500;
}
#navigation #contact {
	background-image:url(../images/nav_contact.png);
	width:250px;
	z-index:501;
	margin-left:-7px;
}

The jQuery
Again the source files will have alot more comments and sript -- this here is just a light breakdown of the scroller.
Here we create touchstart, touchmove and touchend events that will run a function that will take argument of the event name (this) so the could run its logic.

$(document).ready(function(){

$('#index').bind('touchstart', function(e){   touchStart( e, this)      });
$('#portfolio').bind('touchstart', function(e){   touchStart(e, this)      });
$('#about').bind('touchstart', function(e){   touchStart(e, this)      });
$('#contact').bind('touchstart', function(e){   touchStart(e, this)      });

$('#index').bind('touchmove', function(e){   touchMove(e, this)      });
$('#portfolio').bind('touchmove', function(e){   touchMove(e, this)      });
$('#about').bind('touchmove', function(e){   touchMove(e, this)      });
$('#contact').bind('touchmove', function(e){   touchMove(e, this)      });

$('#index').bind('touchend', function(e){   touchEnd(e, this)      });
$('#portfolio').bind('touchend', function(e){   touchEnd(e,this)      });
$('#about').bind('touchend', function(e){   touchEnd(e, this)      });
$('#contact').bind('touchend', function(e){   touchEnd(e, this)      });

more JQuery
On touch start we prevent default behaviors, all we do here is set our css background by letting the gogo argument accept (this) that was passed in our initial event touchsart. We also prevent default behavior of the users touch.

	

function touchStart(e, gogo){
e.preventDefault();	
$(gogo).css({"background-position":"0px -33px"}); 
clicked = 2; 
}

more JQuery
on touch move we run a little math to figure where the user fingers are on the tough navigation element and screen. the logic basically says on that if the users touches outside the widths and heights of the menu elements then animate that button to its orignal state and if not then -------------

function touchMove(e, gogo){
e.preventDefault(); 
clicked = 1;  
if(e.originalEvent.touches[0].clientY < $(gogo).offset().top || e.originalEvent.touches[0].clientY > ( $(gogo).offset().top + $(gogo).height())  ){
$(gogo).css({"background-position":"0px 0px"}); 
}else if(e.originalEvent.touches[0].clientX< $(gogo).offset().left || e.originalEvent.touches[0].clientX > ( $(gogo).offset().left + $(gogo).width())  ){
$(gogo).css({"background-position":"0px 0px"}); 
}else{
$(gogo).css({"background-position":"0px -33px"}); 
	
	}
	
	}

more JQuery

On touch end Here we are saying when the user lift their finger return the button to its orignal state. I am also running logic here for a clicked variable which gets set from the touchstart to 2 and in touchmove to 1 -- basically what this is saying is that is the user did move their finger then they must want to navigate to that url.


function touchEnd(e, gogo){
	$(gogo).css({"background-position":"0px 0px"}); 
	

if(clicked == 2 ){

window.location.href = $(gogo).attr('id')+".php";
window.focus(); 
}

}

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 menus

Other blogs