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:

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:

 
 
 
	 
	 
	
	
	
 
 


	

		
Swipe for Panel Demo
	


	
	
			
If you swipe left-right
	
			
If you swipe right-left
		
		
		
This page uses jQuery Mobile 1.3.0-beta 1
	


	

		

			
Listview
			
Item A24
		

	

	

		
What are you looking for?