Skip to content

Commit 468c3b3

Browse files
patrickashpatrickash
committed
orientationchange Doc and Example
Set up an orientationchange documentation and sample code.
1 parent d97b1b8 commit 468c3b3

File tree

2 files changed

+94
-0
lines changed

2 files changed

+94
-0
lines changed

‎entries/orientationchange.xml

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?xml version="1.0"?>
2+
<entry name="orientationchange" type="event" return="jQuery">
3+
<title>orientationchange</title>
4+
<desc>Enables bookmarkable #hash history.</desc>
5+
<longdesc>
6+
<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 "portrait" or "landscape".</p>
7+
<p>Note, 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 false.</p>
8+
<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
9+
<pre>
10+
<code><![CDATA[
11+
$(function(){
12+
// Bind an event to window.orientationchange that, when the device is turned, gets the
13+
// orientation and displays it to on screen.
14+
$(window).bind('orientationchange', orientationChangeHandler);
15+
16+
function orientationChangeHandler(event){
17+
$('h1#orientation').html('This device is in ' + event.orientation + ' mode!');
18+
}
19+
// You can also manually force this event to fire.
20+
$(window).orientationchange();
21+
});
22+
]]></code>
23+
</pre>
24+
<p>Visit this from your orientation-enabled device to see it in action!</p>
25+
<iframe id="orientationIframe" src="/resources/orientationchange/example1.html" style="width:100%;height:90px;border:0px"></iframe>
26+
</p>
27+
</longdesc>
28+
<added>1.0</added>
29+
<signature>
30+
<argument name="callback" type="Function" optional="true">
31+
<desc>A function to invoke after the the orientationchange event fires.</desc>
32+
</argument>
33+
</signature>
34+
<category slug="events"/>
35+
</entry>

‎resources/orientationchange/example1.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>orientationchange demo</title>
7+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
8+
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
9+
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
10+
<style>
11+
html, body { padding: 0; margin: 0; }
12+
html, .ui-mobile, .ui-mobile body {
13+
height: 85px;
14+
}
15+
.ui-mobile, .ui-mobile .ui-page {
16+
min-height: 85px;
17+
}
18+
#nav {
19+
font-size: 200%;
20+
width:17.1875em;
21+
margin:17px auto 0 auto;
22+
}
23+
#nav a {
24+
color: #777;
25+
border: 2px solid #777;
26+
background-color: #ccc;
27+
padding: 0.2em 0.6em;
28+
text-decoration: none;
29+
float: left;
30+
margin-right: 0.3em;
31+
}
32+
#nav a:hover {
33+
color: #999;
34+
border-color: #999;
35+
background: #eee;
36+
}
37+
#nav a.selected,
38+
#nav a.selected:hover {
39+
color: #0a0;
40+
border-color: #0a0;
41+
background: #afa;
42+
}
43+
</style>
44+
</head>
45+
<body>
46+
<h1 id="orientation">orientationchange Not Supported on this Device.</h1>
47+
<script>
48+
$(function(){
49+
$(window).bind('orientationchange', orientationChangeHandler);
50+
51+
function orientationChangeHandler(event){
52+
$('h1#orientation').html('This device is in ' + event.orientation + ' mode!');
53+
}
54+
55+
$(window).orientationchange();
56+
});
57+
</script>
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)