Skip to content

Commit cc806dc

Browse files
agcolomagcolom
committed
fixed hashchange page and example for indentation and conformance to style guides
1 parent d53d7f8 commit cc806dc

File tree

2 files changed

+80
-81
lines changed

2 files changed

+80
-81
lines changed

‎entries/hashchange.xml‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,32 @@
55
<desc>Enables bookmarkable #hash history.</desc>
66
<longdesc>
77
<p>The jQuery Mobile <code>.hashchange()</code> event handler enables very basic bookmarkable #hash history by providing a callback function bound to the window.onhashchange event. The onhashchange event fires when a window's hash changes.</p>
8-
<p>In browsers that support it, the native HTML5 window.onhashchange event is used. In IE6/7 (and IE8 operating in "IE7 compatibility" mode), a hidden Iframe is created to allow the back button and hash-based history to work.</p>
8+
<p>In browsers that support it, the native HTML5 window.onhashchange event is used. In IE6/7 (and IE8 operating in "IE7 compatibility" mode), a hidden iframe is created to allow the back button and hash-based history to work.</p>
99
<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
10-
<pre>
11-
<code><![CDATA[
10+
<pre><code><![CDATA[
1211
$(function() {
1312
// Bind an event to window.onhashchange that, when the hash changes, gets the
1413
// hash and adds the class "selected" to any matching nav link.
15-
$(window).hashchange(function() {
14+
$( window ).hashchange(function() {
1615
var hash = location.hash;
1716
1817
// Set the page title based on the hash.
19-
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
18+
document.title = "The hash is " + ( hash.replace( /^#/, "" ) || "blank" ) + ".";
2019
2120
// Iterate over all nav links, setting the "selected" class as-appropriate.
2221
$( "#nav a" ).each(function() {
2322
var that = $( this );
2423
that[ that.attr( "href" ) === hash ? "addClass" : "removeClass" ]( "selected" );
25-
});
24+
});
2625
});
2726
// Since the event is only triggered when the hash changes, we need to trigger
2827
// the event now, to handle the hash the page may have loaded with.
29-
$(window).hashchange();
28+
$( window ).hashchange();
3029
});
31-
]]></code>
32-
</pre>
33-
<p>iFrame source: <span id="hashtagIframeLink">example1.html</span>
34-
<iframe id="hashtagIframe" src="/resources/hashchange/example1.html" style="width:100%;height:90px;border:0px"></iframe>
35-
</p>
30+
]]></code></pre>
31+
<p>iFrame source: <span id="hashtagIframeLink">example1.html</span>
32+
<iframe id="hashtagIframe" src="/resources/hashchange/example1.html" style="width:100%;height:90px;border:0px"></iframe>
33+
</p>
3634
</longdesc>
3735
<added>1.0</added>
3836
<signature>

‎resources/hashchange/example1.html‎

Lines changed: 70 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,81 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>hashtag 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>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>hashtag demo</title>
7+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
8+
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
9+
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <style>
10+
html, body {
11+
padding: 0; margin: 0;
12+
}
13+
html, .ui-mobile, .ui-mobile body {
14+
height: 85px;
15+
}
16+
.ui-mobile, .ui-mobile .ui-page {
17+
min-height: 85px;
18+
}
19+
#nav {
20+
font-size: 200%;
21+
width:17.1875em;
22+
margin:17px auto 0 auto;
23+
}
24+
#nav a {
25+
color: #777;
26+
border: 2px solid #777;
27+
background-color: #ccc;
28+
padding: 0.2em 0.6em;
29+
text-decoration: none;
30+
float: left;
31+
margin-right: 0.3em;
32+
}
33+
#nav a:hover {
34+
color: #999;
35+
border-color: #999;
36+
background: #eee;
37+
}
38+
#nav a.selected,
39+
#nav a.selected:hover {
40+
color: #0a0;
41+
border-color: #0a0;
42+
background: #afa;
43+
}
44+
</style>
4445
</head>
4546
<body>
46-
<p id="nav">
47-
<a href="#test1" class="hashExLink">test 1</a>
48-
<a href="#test2" class="hashExLink">test 2</a>
49-
<a href="#test3" class="hashExLink">test 3</a>
50-
<a href="#test4" class="hashExLink">test 4</a>
51-
</p>
52-
<script>
53-
$(function(){
54-
// Bind an event to window.onhashchange that, when the hash changes, gets the
55-
// hash and adds the class "selected" to any matching nav link.
56-
$(window).hashchange( function(){
57-
var hash = location.hash;
47+
<p id="nav">
48+
<a href="#test1" class="hashExLink">test 1</a>
49+
<a href="#test2" class="hashExLink">test 2</a>
50+
<a href="#test3" class="hashExLink">test 3</a>
51+
<a href="#test4" class="hashExLink">test 4</a>
52+
</p>
53+
<script>
54+
$(function(){
55+
// Bind an event to window.onhashchange that, when the hash changes, gets the
56+
// hash and adds the class "selected" to any matching nav link.
57+
$( window ).hashchange(function(){
58+
var hash = location.hash;
5859

59-
// Set the page title based on the hash.
60-
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
60+
// Set the page title based on the hash.
61+
document.title = "The hash is " + ( hash.replace( /^#/, "" ) || "blank" ) + ".";
6162

62-
// Iterate over all nav links, setting the "selected" class as-appropriate.
63-
$('#nav a').each(function(){
64-
var that = $(this);
65-
that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
66-
});
67-
})
68-
// Since the event is only triggered when the hash changes, we need to trigger
69-
// the event now, to handle the hash the page may have loaded with.
70-
$(window).hashchange();
63+
// Iterate over all nav links, setting the "selected" class as-appropriate.
64+
$( "#nav a" ).each(function(){
65+
var that = $( this );
66+
that[ that.attr( "href" ) === hash ? "addClass" : "removeClass" ]( "selected" );
67+
});
68+
})
69+
// Since the event is only triggered when the hash changes, we need to trigger
70+
// the event now, to handle the hash the page may have loaded with.
71+
$( window ).hashchange();
7172

72-
// To change src attribute of parent iframe element
73-
$('.hashExLink').on('click', function() {
74-
window.parent.document.getElementById( "hashtagIframe" ).src = "/resources/hashchange/example1.html" + $(this).attr( "href" );
75-
window.parent.document.getElementById( "hashtagIframeLink" ).innerHTML = "example1.html" + $(this).attr( "href" );
76-
});
77-
});
73+
// To change src attribute of parent iframe element
74+
$( ".hashExLink" ).on( "click", function() {
75+
window.parent.document.getElementById( "hashtagIframe" ).src = "/resources/hashchange/example1.html" + $( this ).attr( "href" );
76+
window.parent.document.getElementById( "hashtagIframeLink" ).innerHTML = "example1.html" + $( this ).attr( "href" );
77+
});
78+
});
7879
</script>
7980
</body>
8081
</html>

0 commit comments

Comments
 (0)