Skip to content

Commit 70a1513

Browse files
patrickashpatrickash
committed
New ThrottledResize Doc and Example
Created throttledresize doc and example. Identifies the event as a special event that is used internally by orientationchange, but also shows an example of exposing the event for custom handling.
1 parent 468c3b3 commit 70a1513

File tree

2 files changed

+105
-0
lines changed

2 files changed

+105
-0
lines changed

‎entries/throttledresize.xml

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0"?>
2+
<entry name="throttledresize" type="event" return="jQuery">
3+
<title>throttledresize</title>
4+
<desc>Enables bookmarkable #hash history.</desc>
5+
<longdesc>
6+
<p>The jQuery Mobile <code>throttleresize</code> event is a special event that prevents browsers from running continuous callbacks on resize. <code>throttleresize</code> is used internally for orientationchange in browsers like Internet Explorer. <code>throttleresize</code> ensures that a held event will execute after the timeout so logic that depends on the final conditions after a resize is complete will still execute properly.</p>
7+
<p>The <code>throttleresize</code> event is triggered if orientationchange is not natively supported.</p>
8+
<p>This event triggers when the browser window resizes from:</p>
9+
<ol>
10+
<li>an orientation change (orientation-enabled device);</li>
11+
<li>changes in dimension ratio that replicates a landspace/portrait change (resizing a desktop browser).<li>
12+
</ol>
13+
14+
<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
15+
<pre>
16+
<code><![CDATA[
17+
var count = 0;
18+
$(function(){
19+
/**
20+
* Bind an event handler to window's throttledresize event that, when triggered,
21+
* passes a reference of itself that is accessible by the callback function.
22+
*/
23+
$(window).bind('throttledresize', throttledresizeHandler);
24+
25+
function throttledresizeHandler(event){
26+
$('#output-text').html('Event Count: ' + ++count);
27+
}
28+
29+
// You can also manually force this event to fire.
30+
$(window).trigger('throttledresize');
31+
});
32+
]]></code>
33+
</pre>
34+
<p>Visit this from your orientation-enabled device to see it in action!</p>
35+
<iframe id="throttledresizeIframe" src="/resources/throttledresize/example1.html" style="width:100%;height:90px;border:0px"></iframe>
36+
</p>
37+
</longdesc>
38+
<added>1.0</added>
39+
<signature>
40+
<argument name="callback" type="Function" optional="true">
41+
<desc>A function to invoke after the the throttledresize event fires.</desc>
42+
</argument>
43+
</signature>
44+
<category slug="events"/>
45+
</entry>

‎resources/throttledresize/example1.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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>throttledresize 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.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="output-text">Event Output</h1>
47+
<script>
48+
var count = 0;
49+
$(function(){
50+
$(window).bind('throttledresize', throttledresizeHandler);
51+
52+
function throttledresizeHandler(event){
53+
$('#output-text').html('Event Count: ' + ++count);
54+
}
55+
56+
$(window).trigger('throttledresize');
57+
});
58+
</script>
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)