skip to main | skip to sidebar

HTML5 Presentation Using jQuery Mobile
jQuery mobile framework provides easily themeable, HTML5-based interface with support for pages transitions, therefore it would be very easy to create simple web presentations that will work on all popular smartphone and desktop platforms.

First, check out the demo, then let's walk through the building blocks of this sample presentation.

HTML5

Using a Multi-page Template, we will place all slides contents in one HTML5 page as multiple mobile-pages.
The mobile page is just a DIV element with a data-role attribute of "page". Each page element will have a unique ID (id="slide1") to be linked internally like (href='#slide1').

The HTML page references to jQuery, jQuery Mobile and the mobile theme CSS in the head as follows.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title> jQuery Mobile Presentation</title>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>


Mobile-page for each slide will look like this :
<div data-role="page" id="slide1" data-theme="a" data-transition="fade">
   <div data-role="header">
      <h1>Slide 1</h1>
   </div>
   <div data-role="content">

   </div>
</div>

  • Note that mobile-pages may contain a header but should not have a footer which will be used for navigation bar.
  • jQuery mobile lets you define a page transition in the anchor that links to it, but for this presentation, we will set the desired transition on the slide div using the same attribute 'data-transition'.

Navigation Functions

Few simple functions are for moving slides forward, backward or to the home slide as follows.    
// change slide with transition set in data-transition
var changeSlide = function(toSlide){
   if(toSlide.length) $.mobile.changePage( toSlide, { transition: toSlide.jqmData('transition') } );
};

// get home slide
var getHomeSlide = function(){
   return $(':jqmData(role=page):first');
};
// go home
var goHome = function(){
   changeSlide( getHomeSlide() );
   return false;
};

// get next slide
var getNextSlide = function(slide){
   return slide.next(':jqmData(role=page)');
};
// go next slide
var goForward = function(){
   changeSlide( getNextSlide($.mobile.activePage) );
   return false;
};

// get previous slide
var getPrevSlide = function(slide){
   return slide.prev(':jqmData(role=page)');
};
// go previous slide
var goBack = function(){
   changeSlide( getPrevSlide($.mobile.activePage) );
   return false;
};
  • $.mobile.changePage is used to go to requested slide with the transition set in 'data-transition' attribute.
  • Note that, $.mobile.activePage is used to get a reference to current mobile-page(slide).
  • Then, jqmData selector combined with :first selector are used to get home slide, or combined with traversing methods (next & prev) to get next/previous slide.
    * jqmData is jQuery mobile replacement for jQuery data.

Handling Swiping and Arrow Keys

We need to handle these events: swipe left/right, pressing left/right arrows.

$(document).keydown(function(e) {
   if(e.keyCode ==39) goForward(); //right
   else if(e.keyCode ==37) goBack(); //left
})
.bind("swiperight", goForward )
.bind("swipeleft", goBack );

Inserting Navigation Bar

A navigation bar will be dynamically inserted in the footer of every slide with forward, home and back buttons.
Navigation bar is crated on 'pagebeforecreate' event, so we can manipulate the mobile-page before default widgets are auto-initialized.

$(':jqmData(role=page)').live( 'pagebeforecreate',function(event){
   var slide = $(this);

   // find footer or add it
   var footer = $(":jqmData(role=footer)", slide );
   if( !footer.length ) {
      footer = $('<div data-role="footer" data-position="fixed" data-fullscreen="true"/>').appendTo(slide);
   };

   // add nav. bar
   footer.html('<div data-role="navbar">'+
               '<ul>'+
                  '<li><a data-icon="back"></a></li>'+
                  '<li><a data-icon="home"></a></li>'+
                  '<li><a data-icon="forward"></a></li>' +
               '</ul>'+
            '</div>');

   // Handle nav. bar clicks
   var backButton = $(':jqmData(icon=back)', footer).click( goBack );
   var homeButton = $(':jqmData(icon=home)', footer).click( goHome );
   var forwardButton = $(':jqmData(icon=forward)', footer).click( goForward );

   // get home, next and previous slides
   var prevSlide = getPrevSlide( slide ), homeSlide = getHomeSlide(), nextSlide = getNextSlide( slide ) ;

   // prev slide exists?
   if( prevSlide.length ) {
      // set href to slide ID
      backButton.attr('href', '#'+ prevSlide.attr('id') );
      homeButton.attr('href', '#'+ homeSlide.attr('id') )
   }else{
      // disable buttons otherwise
      backButton.addClass('ui-disabled');
      homeButton.addClass('ui-disabled')
   };

   // next slide exists?
   if( nextSlide.length ) {
      // set href to slide ID
      forwardButton.attr('href', '#'+ nextSlide.attr('id') )
   }else{
      // disable button otherwise
      forwardButton.addClass('ui-disabled')
   };

   //.........
});
  • First, The footer is either found in a slide or added to it.
  • Afterwards, nav. bar is inserted in footer with 3 buttons: back, home and forward.
  • Then, binding clicks events of these buttons to the 3 navigation functions: goBack, goHome and goForward.
  • Finally, Checking if their is a previous slide to set 'href' of back and home buttons. Otherwise, 'ui-disabled' class is added to the buttons to look disabled. Also, doing the same on forward button.

Responsive Lazy-Loading

Since we placed all slides contents in one HTML page, we should not let the browser load all images on the first slide. Therefore, we need lazy-loading.
In addition, we need to load images in a responsive way by delivering smaller images for small screens.

We start by setting images source to a 1-pixel gif, set the large image(>480px wide) source in 'data-large' attribute and smaller image in 'data-small'.

<img src="empty.gif" class="photo"
         data-small="..."
         data-large="..."/>


Then, we call loadImages() to load the appropriate size on 'pagebeforecreate' event of every slide.
Similarly, loadImages() is called on the next slide after 3 seconds to prepare the images in it for smooth transition.

var loadImages = function(slide) {
   var width = $(window).width();
   // use large image for screens bigger than 480px, otherwise use small size
   var attrName = width > 480? 'large' : 'small';

   $('img:jqmData('+attrName+')', slide).each(function(){
      var img = $(this);
      var source = img.jqmData(attrName);
      // set img src with large/small image then remove data
      if(source) img.attr('src', source).jqmRemoveData(attrName);
   });
};


Also, set images max-width in CSS, so, small images will scale to fit smaller screens.

img{
   max-width:100%
}


If you find this tutorial interesting, you may also check Dynamic Page Generation in jQuery Mobile.

7 comments

  1. Sam D // July 25, 2012 at 12:16:00 PM GMT+10  

    Nice demo Mike

  2. Mike // July 25, 2012 at 1:07:00 PM GMT+10  

    Thanks @jQuery4u, Glad you like it

  3. Joseph R. B. Taylor // July 25, 2012 at 10:18:00 PM GMT+10  

    A good use for jQuery Mobile! Definitely a great way to build a presentation.

  4. Mike // July 26, 2012 at 12:09:00 AM GMT+10  

    Thanks @Joseph for your feedback :)

  5. Anonymous // July 26, 2012 at 11:13:00 PM GMT+10  

    Good start, but .live() has been deprecated. The new/current approach is to use $(document).on() and specify three parameters (event delegation).

  6. Mike // July 27, 2012 at 2:44:00 AM GMT+10  

    Thank you Anonymous for the heads-up!

  7. Anonymous // August 14, 2012 at 8:33:00 PM GMT+10  

    Very good article thank you. Any further reading/examples on the same topic of jquery presentations for mobiles? Thank you!

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net
More Tech Tips! | Technology tips on web development

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS