jQuery Mobile 1.3 Swipe to Reveal Panel with Demo

This entry was posted Friday, 1 February, 2013 at 11:10 pm by Mario Lurig

I wanted to make use of the new jQuery Mobile 1.3.0-beta1 feature called Panels, allowing you to overlay, push, or reveal a hidden panel of content on the left or right of the main window. This is most commonly used to provide extra navigation options. In my case, I wanted to show static content that is hyper relevant, but without crowding up the main window.

However, the docs recommend and demonstrate how to use a hyperlink to activate the panel, which is great in a header, footer, or in a button, but it seemed more natural to allow the user to swipe the screen either left or right to show the panel. Thus, I need to add the following code to the bottom of the page:

<script type='text/javascript'>
$(document).on('pageinit',function(){
	$("#content").on("swiperight",function(){
		$("#leftpanel").panel( "open");
	});
	$("#content").on("swipeleft",function(){
		$("#rightpanel").panel( "open");
	});
});
</script>


Note that, as recommended by jQuery Mobile, I am not using $(document).ready(), but rather $(document).on(‘pageinit’). The simple JavaScript code identifies when the user swipes anywhere in the main content area and reveals the appropriate panel. Here is the simplified code used in the demo:

<!DOCTYPE html> 
<html> 
<head> 
	<title>jQuery Mobile 1.3 | Swipe to Reveal Panel Demo</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head> 
<body> 
<div data-role="page" data-theme='c'>
 
	<div data-role="header">
		<h1>Swipe for Panel Demo</h1>
	</div><!-- /header -->
 
	<div data-role="content" id="content">	
			<h2>If you swipe left-right</h2>	
			<h2>If you swipe right-left</h2>		
		</div>
		<p><em>This page uses jQuery Mobile 1.3.0-beta 1</em></p>
	</div><!-- /content -->
 
	<div data-role="panel" id="leftpanel" data-display="reveal" data-position="left">
		<ul data-role='listview'>
			<li data-theme='a'>Listview</li>
			<li>Item A<span class='ui-li-count'>24</span></li>
		</ul>
 
	</div><!-- /leftpanel -->
	<div data-role="panel" id="rightpanel" data-display="push" data-position="right"data-theme="b">
		<h2>What are you looking for?</h2>
	</div><!-- /rightpanel -->
</div><!-- /page -->
<script type='text/javascript'>
$(document).on('pageinit',function(){
	$("#content").on("swiperight",function(){
		$("#leftpanel").panel( "open");
	});
	$("#content").on("swipeleft",function(){
		$("#rightpanel").panel( "open");
	});
});
</script>
</body>
</html>

You should be aware that since it is based on the “#content” section, any short pages that don’t have content completely down the screen will have areas where the user cannot swipe. You should not attach it to the page as the page includes the panels, so very strange things start happening. Also note that an ID was added to the content div for easy addressing in the jQuery selector.

Share and Enjoy:
  • Facebook
  • Twitter
  • Reddit
  • StumbleUpon
  • Digg
  • del.icio.us
  • Tumblr
  • PDF

4 Comments to jQuery Mobile 1.3 Swipe to Reveal Panel with Demo

  1. manuB says:

    March 11th, 2013 at 2:27 pm

    just great
    thx
    manu

  2. Patrick Kwinten says:

    March 25th, 2013 at 4:17 am

    have you counted the number of divs? more closure divs than opening divs

  3. Emil says:

    May 28th, 2013 at 3:03 pm

    how do you increase the width on the left/right sides?

  4. Mike Harper says:

    October 18th, 2013 at 7:34 am

    Thanks, saved me time :)

Leave a comment