Handling Orientation Change

Contact Us or call 1-877-932-8228
Handling Orientation Change

Handling Orientation Change

Mobile phones, unlike desktops and laptops, often change orientation: we tilt our phones from vertical (portrait) to horizontal (landscape) orientation. Web pages and apps that respond to orientation changes are more useful and more interesting.

jQuery Mobile makes easy the handling of these events with the orientationchange event; see the jQuery Mobile docs for more info:

jQuery Mobile Orientation Event
Event Details
orientationchange Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an orientation property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationchange is not natively supported, or when $.mobile.orientationChangeEnabled is set to false.

Showing/hiding content, changing a side-by-side layout into a stacked vertical layout, and other orientation-state reactions are enhancements to your pages that your mobile users will appreciate.

Let's look at an example with the Jazz Calendar site: open jQueryMobile/Demos/jazz-orientation/index.html in a phone browser and with a file editor to check the code.

Code Sample:

jQueryMobile/Demos/jazz-orientation/index.html
<!DOCTYPE html> 
<html> 
	<head> 
	<title>Jazz Calendar</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript">
		
		$(document).on('swiperight', ".swipeablepage", function() {
			$( "body" ).pagecontainer( "change", $(this).attr('data-prev-page') );
		});
		
		$(document).on('swipeleft', ".swipeablepage", function() {
			$( "body" ).pagecontainer( "change", $(this).attr('data-next-page') );
		});

		$(window).on('orientationchange', function(event) {
 			setContent(event.orientation);
		});

		$(document).on('pagecreate', function() {
			setContent(window.orientation);
		});

		function setContent(orien) {
			// desktops will return undefined for window.orientation, so handle that:
			if (orien != undefined) {
				// on page load, window.orientation returns 0, 90, -90, 180, so translate to 'portrait' or 'landscape'
				if (orien == '0' || orien == '180') {
					orien = 'portrait';
				} else if (orien == '90' || orien == '-90') {
					orien = 'landscape';
				}
				
				//hide extra content for portrait view
				if (orien == 'portrait') {
					$('p.info').hide();
				} else if (orien == 'landscape') {
					$('p.info').show();
				}
			}
		}

	</script>
</head> 
<body> 

<div data-role="page" class="page" id="home">
	<div data-role="header">
		<h1>Jazz Calendar - Attribute</h1>
	</div>

	<div class="ui-content" role="main">
		<p>Use the filter below to find concerts near you:</p>
		<form class="ui-filterable">
			<input id="filter-input" data-type="search">
		</form>
		<ul data-role="listview" data-filter="true" data-input="#filter-input">
			<li><a href="#bakerskeyboardlounge">Baker's Keyboard Lounge</a></li>
			<li><a href="#bluesalley">Blues Alley</a></li>
			<li><a href="#elchapultepec">El Chapultepec</a></li>
			<li><a href="#villagevanguard">Village Vanguard</a></li>
		</ul>
	</div>

</div>

<div data-role="page" data-next-page="#bluesalley" data-prev-page="#villagevanguard" class="swipeablepage" id="bakerskeyboardlounge">

	<div data-role="header">
		<h1>Baker's Keyboard Lounge</h1>
	</div>

	<div class="ui-content" role="main">
		<address>2050 Livernois Ave
		<br>Detroit, Michigan 48221</address>
		<img src="https://maps.googleapis.com/maps/api/staticmap?center=2050%20Livernois%20Ave,%20Detroit,%20MI&zoom=14&size=288x200&markers=2050%20Livernois%20Ave,%20Detroit,%20MI&sensor=false" height="200" width="288" />
		<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
		<p class="info">Baker's is noted for its long history of presenting local and major jazz acts, its excellent acoustics, its intimacy - seating only 99, its Art Deco furnishings, including a distinctive, piano-shaped bar painted with a keyboard motif.</p>
	</div>

</div>

<div data-role="page" data-next-page="#elchapultepec" data-prev-page="#bakerskeyboardlounge" class="swipeablepage" id="bluesalley">

	<div data-role="header">
		<h1>Blues Alley</h1>
	</div>

	<div class="ui-content" role="main">
		<address>1073 Wisconsin Ave. NW
		<br>Washington, DC 20007</address>
		<img src="https://maps.googleapis.com/maps/api/staticmap?center=1073%20Wisconsin%20Ave.%20NW%20Washington,%20DC&zoom=14&size=288x200&markers=1073%20Wisconsin%20Ave.%20NW%20Washington,%20DC&sensor=false" height="200" width="288" />
		<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
		<p class="info">Founded in 1965, Blues Alley is the nation's oldest continuing jazz supper club, having showcased internationally renowned concert hall artists such as Dizzy Gillespie, Sarah Vaughan, Nancy Wilson, Grover Washington Jr., Ramsey Lewis, Charlie Byrd, Maynard Ferguson and Eva Cassidy in a small intimate setting. <a href="http://www.bluesalley.com/visit.cfm">More Info</a></p>
	</div>

</div>

<div data-role="page" data-next-page="#villagevanguard" data-prev-page="#bluesalley" class="swipeablepage" id="elchapultepec">

	<div data-role="header">
		<h1>El Chapultepec</h1>
	</div>

	<div class="ui-content" role="main">
		<address>1962 Market St
		<br>Denver, CO 80202</address>
		<img src="https://maps.googleapis.com/maps/api/staticmap?center=1962%20Market%20St.%20Denver,%20CO&zoom=14&size=288x200&markers=1962%20Market%20St.%20Denver,%20CO&sensor=false" height="200" width="288" />
		<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
		<p class="info">El Chapultepec, at 20th and Market streets in lower downtown Denver, may look like just a divey little bar. But this jazz club has hosted some of the most legendary artists in music history. <a href="http://www.gocolorado.com/restaurants/bars-pubs/denvers-el-chapultepec-cold-beer-hot-jazz/">More Info</a></p>
	</div>

</div>

<div data-role="page" data-next-page="#bakerskeyboardlounge" data-prev-page="#elchapultepec" class="swipeablepage" id="villagevanguard">

	<div data-role="header">
		<h1>Village Vanguard</h1>
	</div>

	<div class="ui-content" role="main">
		<address>178 7th Avenue South, New York, NY 10014
		<br></address>
		<img src="https://maps.googleapis.com/maps/api/staticmap?center=178%207th%20Avenue%20South,%20New%20York,%20NY&zoom=14&size=288x200&markers=178%207th%20Avenue%20South,%20New%20York,%20NY&sensor=false" height="200" width="288" />
		<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
		<p class="info">For 70 years, [our] alliterative name has swung in 4/4 time, marking the center of the known jazz universe to an international circle of musicians and music fans. To the uninitiated, the small club at the bottom of 15 well-trodden steps below street level may seem little more than a cramped, triangular-shaped room. But to a hip populace its where the ghosts of past jazz giants still play, where the best living jazz talent aspire to record, and where sound waves seem to reverberate in a manner unlike any other club, anywhere. <a href="http://www.villagevanguard.com/html/history.html">More Info</a></p>
	</div>

</div>

</body>
</html>

We create a function, setContent, which when executed will check to see if the parameter passed to it (orien) is undefined; if not, then we must be dealing with a device for which orientation makes sense - a phone rather than a desktop.

setContent can be invoked in two different ways. When the page initially loads ($(document).on('pagecreate', '.page', function()), we pass the value of window.orientation to setContent - this has a value of 90 or -90 (for landscape orientations) or 0 or 180 (for portrait orientations).

We also check for orientation-state changes ($(window).on('orientationchange', function(event)) after the page has loaded, passing the value of event.orientation to setContent. This parameter has a value of "landscape" or "portrait".

If its parameter has one of the numeric values, function setContent translates the value into "landscape" or "portrait". It then uses jQuery's hide() and show() functions to hide or show any paragraph of class info - showing the content for landscape and hiding it for portrait:

portrait orientation

landscape orientation

Next