Building app with responsive design using jQuery mobile and CSS3 (Media Query)

Having built few mobile apps with HTML5 and CSS, it allowed to build apps quickly with simple text editor using HTML and JS. Recently it has been very popular. There are many really good frameworks such as Sencha, Jo, The-M-Project , KendoUI just to name a few. JQuery Mobile is probably one of the simplest one to get started with.

One of the challenges these days is building an app that works on both phone and tablet¬† (able to utilize larger screen sizes). Today, I am going to quickly demonstrate building of a simple mobile app with “Responsive” mobile design that would work on both mobile phone as well as tablet. Just to show the end result,¬† here is what we will have at the end:

Wireframe: To get started let’s starts with code below. You can read more about it on jQuery Mobile website.

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Cool App</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Some Cool Stuff</p>		
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>

If you crate index.html with above code you will have a mobile app using jQuery mobile:).

Adding Menu: Lets add the menu and some content. To do this, lets create two divs,
“menu-pane” and “content-pane”. These would be the direct child under “content” div.

<div data-role="content">
<div id="menu-pane">
<ul data-role="listview">
	<li><a id="menu-item-1" href="#">Menu Item 1</a></li>
	<li><a id="menu-item-2" href="#">Menu Item 2</a></li>
</ul>
</div>
<div id="content-pane">
 Some Cool Stuff</div>
</div>
<!-- /content -->

You should see a page like below:

Behavior on buttons: Now, Lets add a behavior when if we click on any menu item it will simply pop up ‘Not Yet Implemented’.
you can do so by adding following jQuery block in side the head tag.

<script type="text/javascript">
		$(document).ready(function() {

			//Just an alert to show its not implatemented..
			$("#menu-item-1, #menu-item-2").click( function () {alert("Not yet Implemented.")});

		}); // end of document Ready

</script>

CSS for menu: Let’s add a tiny little CSS so that menu and content page looks better on tablet.

<style>
	  #menu-pane {
		  width: 30%;
		  float: left;
		  }

	  #content-pane {
			width: 70%;
			height: 100%;
			float: left;
			text-align: center;
		}
</style>

At this time you should have a nice looking interface good for tablet. Similar to page below:

This wouldn’t look so nice on a mobile phone, and we are going to fix that next.
Idea here is that we are going to add a menu button on top right which will expose the menu for user on mobile phone and n tablet menu just appears on the left side.

Options Button: So, lets add a button in the HTML that will on click open a pop up with menu items. To do this, we will add a button and a empty popup div in which we will populate dynamically. Add the following HTML inside the header div.

<a id="options-btn" class="ui-btn-right" href="#popupPanel" data-icon="gear" data-rel="popup">Options</a>
<!-- Popup Menu Content -->
<div data-role="popup" id="popupPanel"><!--Empty for now--></div>

Populating Popup Menu: Now since we have an empty div for popup, lets populate that with the menu we have on the screen. Based on your implementation, you may choose to do it differently.

Add the following javascript in the document.ready function. This will just copy the HTML from #menu-pane in to the #popupPanel

$("#popupPanel").html($("#menu-pane").html());

You can see the ui would look something like below:

Making it “Responsive” with Media Query: Now finally we want to make it “Responsive” by using media query. What we would want to do is that,
when its on a tablet, we want to take off the “Options” button. And, when we are on a mobile phone we want to remove the menu from left and show the “Options” button.
Let’s do that by adding media query css.

  /* Hide the menu-pane when on mobile */
		@media screen and (max-width: 480px) {
	      #menu-pane{
			display: none;
		  }

		}

Also lets update the existing css we had before and wrap it for tablet view.

/* Hide Options button on tablet */
		@media screen and (min-width: 481px) {
		  #menu-pane {
			  width: 30%;
			  float: left;
			  }

	      #content-pane {
				width: 70%;
				height: 100%;
				float: left;
				text-align: center;
			}

			#options-btn {
					display: none;
			}
		}

At this time we have have a working app that works on both tablet and mobile! On the browser, you can change the browser and see it in action :).

Complete source code of this could be found in github at: https://github.com/manijshrestha/jQueryMobileResponsiveDemo

Final output: The final HTML would look like one below:

<!DOCTYPE html> 
<html> 
<head> 
	<title>Cool App</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$("#popupPanel").html($("#menu-pane").html());	
			//Just an alert to show its not implatemented..
			$("#menu-item-1, #menu-item-2").click( function () {alert("Not yet Implemented.")});
		
		}); // end of document Ready
	</script>
	
	<style>
		
	  /* Hide the menu-pane when on mobile */	 
		@media screen and (max-width: 480px) {
	      #menu-pane{
			display: none;
		  }

		}
		
	  /* Hide Options button on tablet */
		@media screen and (min-width: 481px) {
		  #menu-pane {
			  width: 30%;
			  float: left;
			  }
	      
	      #content-pane {
				width: 70%;
				height: 100%;
				float: left;
				text-align: center;
			}
			
			#options-btn {
					display: none;
			}
		}
		
	</style>
	
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Cool App</h1>
		<a id="options-btn" href="#popupPanel" data-icon="gear" data-rel="popup" class="ui-btn-right">Options</a>		
		<!-- Popup Menu Content -->
		<div data-role="popup" id="popupPanel" >
			<!--Empty for now-->
		</div>
	</div><!-- /header -->

	<div data-role="content">
		<div id="menu-pane">
		   <ul data-role="listview">
				<li><a id="menu-item-1" href="#">Menu Item 1</a></li>
				<li><a id="menu-item-2" href="#">Menu Item 2</a></li>
		   </ul>
		</div>
		
		<div id="content-pane">	
			<p>		Some Cool Stuff		</p>		
		</div>
		
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>

Hope you enjoyed this post. Thank you,

Advertisements