Swipe Into Mobile Development With jQuery Mobile

Have you heard of jQuery? If so, did you know that their is a jQuery mobile? jQuery mobile is very similar to jQuery, but for mobile. It makes it easy for developers to do mobile events, like swipe for example and other events that might make your website or your HTML5 mobile application more interactive with events.

 

This experiment was inspired by doing a project that involved making a mobile app with HTML5 and a HTML5 framework. I didn’t get a chance to really get a chance to experiment with it during the project, so I thought digging more into jQuery mobile would be fun and a learning experience that would be beneficial in other projects.

 

My goal in this experiment was to take a tutorial on how to swipe and see if I could make that action happen in my own tutorial. I succeeded! It wasn’t hard. It took only a few lines of Javascript and CSS.

 

HTML:

 <h1>Swipe below</h1>
 <div>
 <img src="circle.jpg" alt="circle"/>
 </div>
 <div>
 Can you read this hidden content?
 </div>

 

Javascript:

function run(){
   $( ".myCircle" ).on( "swipe", mySwipeEvent );
}

function mySwipeEvent(event){
   $( ".myCircle" ).css('display',"none");
   $( ".hiddenContent" ).css('display',"block");
}

 

The code above displays a image of a circle. When the user swipes the circle, the circle is removed and hidden content appears. Click any of the images below to try it for yourself!

 

Before Swipe:

BeforeSwipe

 

After Swipe

AfterSwipe

 

Credit and Resources:
Previous Tutorial on Swiping:
http://api.jquerymobile.com/swipe/

 

jQuery Mobile Website:
http://jquerymobile.com/