entries/orientationchange.xml

<?xml version="1.0"?>
<entry name="orientationchange" type="event" example-selector="window">
	<title>orientationchange event</title>
	<desc>Device portrait/landscape orientation event</desc>
	<longdesc>
		<p>The jQuery Mobile <code>orientationchange</code> event triggers when a device orientation changes, either by turning the device vertically or horizontally. When bound to this event the callback function has the event object. The event object contains an <code>orientation</code> property equal to either <code>"portrait"</code> or <code>"landscape"</code>.</p>
		<p>Note that we bind to the browser's resize event when <code>orientationchange</code> is not natively supported or if <code>$.mobile.orientationChangeEnabled</code> is set to <code>false</code>.</p>

		<div class="warning">
			<h3>orientationchange timing</h3>

			<p>The timing of the <code>orientationchange</code> event with relation to the change of the client height and width is different between browsers, though the current implementation will give you the correct value for <code>event.orientation</code> derived from <code>window.orientation</code>. This means that if your bindings are dependent on the height and width values you may want to disable <code>orientationChange</code> altogether with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.</p>
		</div>
	</longdesc>
	<added>1.0</added>
	<signature>
		<property name="orientation" type="String">
			<desc>The new orientation of the device. Possible values are <code>"portrait"</code> and <code>"landscape"</code>.</desc>
		</property>
	</signature>
	<example>
		<height>490</height>
		<desc>Visit this from your orientation-enabled device to see it in action!</desc>
		<code><![CDATA[
// Bind an event to window.orientationchange that, when the device is turned,
// gets the orientation and displays it to on screen.
$( window ).on( "orientationchange", function( event ) {
	$( "#orientation" ).text( "This device is in " + event.orientation + " mode!" );
});

// You can also manually force this event to fire.
$( window ).orientationchange();
]]></code>
		<html><![CDATA[
<h1 id="orientation">orientationchange Not Supported on this Device.</h1>
]]></html>
	</example>
	<category slug="events"/>
</entry>