Skip to content

Commit 157d7b1

Browse files
bobholtajpiano
bobholt
authored and
ajpiano
committed
bring faq section examples into core style
1 parent 4e1e753 commit 157d7b1

13 files changed

+232
-154
lines changed

‎page/faq/add_keyboard_navigation.md

Lines changed: 96 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -33,24 +33,33 @@ Then a keyboard key is pressed the event break into three separate events, which
3333
So I’m going to use the last phase of the events and use the keyup event.
3434

3535
```
36-
$(document.documentElement).keyup(function (event) {
37-
// handle cursor keys
38-
});
36+
$( document.documentElement ).keyup(function(event) {
37+
38+
// handle cursor keys
39+
40+
});
3941
```
4042

4143
Note that all event handlers in jQuery, such as click, keyup, mouseover, etc receive an event [argument](http://en.wikipedia.org/wiki/Parameter_(computer_science)) - which I’ve captured under the variable name event.
4244

4345
The left and right key codes are 37 and 39 respectively. So we only want to action the slide if these keys are pressed, so we’ll check the keyCode property on the event - this property is [very well supported in browsers](http://www.quirksmode.org/js/keys.html):
4446

4547
```
46-
$(document.documentElement).keyup(function (event) {
47-
// handle cursor keys
48-
if (event.keyCode == 37) {
49-
// go left
50-
} else if (event.keyCode == 39) {
51-
// go right
52-
}
53-
});
48+
$( document.documentElement ).keyup(function(event) {
49+
50+
// handle cursor keys
51+
52+
if (event.keyCode === 37) {
53+
54+
// go left
55+
56+
} else if (event.keyCode === 39) {
57+
58+
// go right
59+
60+
}
61+
62+
});
5463
```
5564

5665
##Triggering the Click on the Right Link
@@ -60,32 +69,32 @@ Triggering a click event is easy, but the problem we have to solve is finding th
6069
In some cases the current class might be on list element, which would make the navigating slightly easier, but in this case the markup looks a bit like this:
6170

6271
```
63-
<div class="coda-slider-wrapper">
64-
<ul>
65-
<li><a class="current" href="#1">1</a></li>
66-
<li><a href="#2">2</a></li>
67-
<li><a href="#3">3</a></li>
68-
<li><a href="#4">4</a></li>
69-
<li><a href="#5">5</a></li>
70-
</ul>
71-
</div>
72+
<div class="coda-slider-wrapper">
73+
<ul>
74+
<li><a class="current" href="#1">1</a></li>
75+
<li><a href="#2">2</a></li>
76+
<li><a href="#3">3</a></li>
77+
<li><a href="#4">4</a></li>
78+
<li><a href="#5">5</a></li>
79+
</ul>
80+
</div>
7281
```
7382

7483
In the case above, the “next” link is #2. Currently there’s no previous available, but we’ll let jQuery handle this for us.
7584

7685
To find the next link, first we need to grab the link that’s currently selected:
7786

7887
```
79-
$('.coda-slider-wrapper ul a.current')
88+
$(".coda-slider-wrapper ul a.current")
8089
```
8190

8291
Next we need to move up the tree (to the li element) and move to the next element and then back down to the a element to trigger a click.
8392

8493
```
85-
$('.coda-slider-wrapper ul a.current')
94+
$(".coda-slider-wrapper ul a.current")
8695
.parent() // moves up to the li element
8796
.next() // moves to the adjacent li element
88-
.find('a') // moves down to the link
97+
.find("a") // moves down to the link
8998
.click(); // triggers a click on the next link
9099
```
91100

@@ -94,42 +103,55 @@ Since jQuery continues to allow chained methods to work even if there’s no ele
94103
Let’s plug this code in to the keyboard event handler:
95104

96105
```
97-
$(document.documentElement).keyup(function (event) {
98-
// handle cursor keys
99-
if (event.keyCode == 37) {
100-
// go left
101-
$('.coda-slider-wrapper ul a.current')
102-
.parent() // moves up to the li element
103-
.prev() // moves to the adjacent li element
104-
.find('a') // moves down to the link
105-
.click(); // triggers a click on the previous link
106-
} else if (event.keyCode == 39) {
107-
// go right
108-
// same as above, but just on one line and next instead of prev
109-
$('.coda-slider-wrapper ul a.current').parent().next().find('a').click();
110-
}
111-
});
106+
$( document.documentElement ).keyup(function(event) {
107+
108+
// handle cursor keys
109+
if (event.keyCode === 37) {
110+
111+
// go left
112+
$(".coda-slider-wrapper ul a.current")
113+
.parent() // moves up to the li element
114+
.prev() // moves to the adjacent li element
115+
.find("a") // moves down to the link
116+
.click(); // triggers a click on the previous link
117+
118+
} else if (event.keyCode === 39) {
119+
120+
// go right
121+
// same as above, but just on one line and next instead of prev
122+
$(".coda-slider-wrapper ul a.current").parent().next().find("a").click();
123+
124+
}
125+
126+
});
112127
```
113128

114129
This code can be simplified since a lot of it is repetitive aside from the ‘next’ and ‘prev’. If you’re happy for slightly more complicated code, then use the code below, otherwise stick with the code above.
115130

116131
```
117-
$(document.documentElement).keyup(function (event) {
118-
var direction = null;
132+
$( document.documentElement ).keyup(function(event) {
133+
var direction = null;
119134
120-
// handle cursor keys
121-
if (event.keyCode == 37) {
122-
// go left
123-
direction = 'prev';
124-
} else if (event.keyCode == 39) {
125-
// go right
126-
direction = 'next';
127-
}
135+
// handle cursor keys
136+
if (event.keyCode === 37) {
128137
129-
if (direction != null) {
130-
$('.coda-slider-wrapper ul a.current').parent()[direction]().find('a').click();
131-
}
132-
});
138+
// go left
139+
direction = "prev";
140+
141+
} else if (event.keyCode === 39) {
142+
143+
// go right
144+
direction = "next";
145+
146+
}
147+
148+
if (direction != null) {
149+
150+
$(".coda-slider-wrapper ul a.current").parent()[ direction ]().find("a").click();
151+
152+
}
153+
154+
});
133155
```
134156

135157
##Where does this all go?
@@ -142,34 +164,48 @@ In Mathieu’s code, he had the following:
142164

143165
```
144166
$().ready(function() {
145-
$('#coda-slider-1').codaSlider();
167+
168+
$("#coda-slider-1").codaSlider();
169+
146170
});
147171
```
148172

149173
Note that $().ready is the same as $(document).ready (though it’s not a style I would personally use). *Directly* after the plugin (i.e. before the });) results in the following code:
150174

151175
```
152176
$().ready(function() {
177+
153178
$().ready(function() {
154-
$('#coda-slider-1').codaSlider();
155179
156-
$(document.documentElement).keyup(function (event) {
180+
$("#coda-slider-1").codaSlider();
181+
182+
$( document.documentElement ).keyup(function (event) {
183+
157184
var direction = null;
158185
159186
// handle cursor keys
160-
if (event.keyCode == 37) {
187+
if (event.keyCode === 37) {
188+
161189
// go left
162-
direction = 'prev';
163-
} else if (event.keyCode == 39) {
190+
direction = "prev";
191+
192+
} else if (event.keyCode === 39) {
193+
164194
// go right
165-
direction = 'next';
195+
direction = "next";
196+
166197
}
167198
168199
if (direction != null) {
169-
$('.coda-slider-wrapper ul a.current').parent()[direction]().find('a').click();
200+
201+
$(".coda-slider-wrapper ul a.current").parent()[ direction ]().find("a").click();
202+
170203
}
204+
171205
});
206+
172207
});
208+
173209
```
174210

175211
You can see this all [in action in the demo](http://static.jqueryfordesigners.com/demo/keyboard-nav.html), and be sure to use the left and right keyboard cursor keys to see the demo working.

‎page/faq/enable_the_back_button.md

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,28 @@ This process was our original code, and most of it needs to stay in place. The c
3434
So we listen for the hashchange event, just like we might listen for a click event:
3535

3636
```
37-
$(window).bind('hashchange', function(){
38-
//do some magic
37+
$( window ).bind("hashchange", function(){
38+
39+
//do some magic
40+
3941
});
4042
```
4143

4244
Now we move all of the original code from the click handler in to this new event listener. I’ve copied this code in, and marked in bold which lines we’ll need to change:
4345

4446
```
45-
$(window).bind('hashchange', function(){
46-
tabContainers.hide();
47-
tabContainers.filter(this.hash).show();
48-
$('div.tabs ul.tabNavigation a').removeClass('selected');
49-
$(this).addClass('selected');
50-
return false;
47+
$( window ).bind( "hashchange", function(){
48+
49+
tabContainers.hide();
50+
51+
tabContainers.filter( this.hash ).show();
52+
53+
$("div.tabs ul.tabNavigation a").removeClass("selected");
54+
55+
$( this ).addClass("selected");
56+
57+
return false;
58+
5159
});
5260
```
5361

@@ -60,7 +68,7 @@ Next we need to address how we can target the appropriate tab to add the selecte
6068
Since we don’t have this to target the right tab, we need to find the element using jQuery. Since we have the hash, we can use this to find the tab link. We can use the “hash” attribute selector like this:
6169

6270
```
63-
$('a[hash=#first]')
71+
$("a[hash = #first]")
6472
```
6573

6674
Therefore we can substitute our hash variable in to the ‘#first’ part of the selector above, and now we’ll have the right element to add the selected class.
@@ -75,18 +83,27 @@ Our final code looks like this:
7583

7684
```
7785
$(function() {
78-
var tabContainers = $('div.tabs > div');
79-
tabContainers.hide().filter(':first').show();
80-
81-
$(window).bind('hashchange', function(){
82-
var hash = window.location.hash || '#first';
83-
tabContainers.hide();
84-
tabContainers.filter(hash).show();
85-
$('div.tabs ul.tabNavigation a').removeClass('selected');
86-
$('a[hash=' + hash + ']').addClass('selected');
87-
});
8886
89-
$(window).trigger("hashchange");
87+
var tabContainers = $("div.tabs > div");
88+
89+
tabContainers.hide().filter(":first").show();
90+
91+
$( window ).bind( "hashchange", function(){
92+
93+
var hash = window.location.hash || "#first";
94+
95+
tabContainers.hide();
96+
97+
tabContainers.filter( hash ).show();
98+
99+
$("div.tabs ul.tabNavigation a").removeClass("selected");
100+
101+
$( "a[hash = " + hash + "]" ).addClass("selected");
102+
103+
});
104+
105+
$( window ).trigger("hashchange");
106+
90107
});
91108
```
92109

‎page/faq/how_do_I_select_elements_when_I_already_have_a_dom_element.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ source: http://docs.jquery.com/Frequently_Asked_Questions
66
If you have a variable containing a DOM element, and want to select elements related to that DOM element, simply wrap it in a jQuery object.
77

88
```
9-
var myDomElement = document.getElementById('foo'); // a plain DOM element
10-
$(myDomElement).find('a'); // finds all anchors inside the DOM element
9+
var myDomElement = document.getElementById("foo"); // a plain DOM element
10+
11+
$( myDomElement ).find("a"); // finds all anchors inside the DOM element
1112
```
1213

1314
Many people try to concatenate a DOM element or jQuery object with a CSS selector, like so:
1415

1516
```
16-
$(myDomElement + '.bar'); // This is equivalent to $("[object HTMLElement].bar")
17+
$( myDomElement + ".bar" ); // This is equivalent to $("[object HTMLElement].bar")
1718
```
1819

1920
Unfortunately, you cannot concatenate strings to objects.

‎page/faq/how_do_i_check_uncheck_a_checkbox_input_or_radio_button.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,19 @@ There are two ways to check/uncheck a checkbox/radio button.
88
Set the 'checked' attribute to true or false.
99

1010
```
11-
// Check #x
12-
$('#x').attr('checked', true);
13-
// Uncheck #x
14-
$('#x').attr('checked', false);
11+
// Check #x
12+
$("#x").attr( "checked", true );
13+
14+
// Uncheck #x
15+
$("#x").attr( "checked", false );
1516
```
1617

1718
Add or remove the 'checked' attribute:
1819

1920
```
20-
// Check #x
21-
$("#x").attr('checked', 'checked');
22-
// Uncheck #x
23-
$("#x").removeAttr('checked');
21+
// Check #x
22+
$("#x").attr( "checked", "checked" );
23+
24+
// Uncheck #x
25+
$("#x").removeAttr("checked");
2426
```

‎page/faq/how_do_i_determine_the_state_of_a_toggled_element.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ source: http://docs.jquery.com/Frequently_Asked_Questions
66
You can determine whether an element is collapsed or not by using the :visible and :hidden selectors.
77

88
```
9-
var isVisible = $('#myDiv').is(':visible');
10-
var isHidden = $('#myDiv').is(':hidden');
9+
var isVisible = $("#myDiv").is(":visible");
10+
11+
var isHidden = $("#myDiv").is(":hidden");
1112
```
1213

1314
If you're simply acting on an element based on its visibility, just include ":visible" or ":hidden" in the selector expression. For example:
1415

1516
```
16-
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
17+
$("#myDiv:visible").animate( {left: "+=200px"}, "slow" );
1718
```

0 commit comments

Comments
 (0)