You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
42
44
43
45
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):
@@ -60,32 +69,32 @@ Triggering a click event is easy, but the problem we have to solve is finding th
60
69
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:
.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
+
});
112
127
```
113
128
114
129
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.
$('.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
+
});
133
155
```
134
156
135
157
##Where does this all go?
@@ -142,34 +164,48 @@ In Mathieu’s code, he had the following:
142
164
143
165
```
144
166
$().ready(function() {
145
-
$('#coda-slider-1').codaSlider();
167
+
168
+
$("#coda-slider-1").codaSlider();
169
+
146
170
});
147
171
```
148
172
149
173
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:
$('.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
+
170
203
}
204
+
171
205
});
206
+
172
207
});
208
+
173
209
```
174
210
175
211
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.
Copy file name to clipboardExpand all lines: page/faq/enable_the_back_button.md
+37-20
Original file line number
Diff line number
Diff line change
@@ -34,20 +34,28 @@ This process was our original code, and most of it needs to stay in place. The c
34
34
So we listen for the hashchange event, just like we might listen for a click event:
35
35
36
36
```
37
-
$(window).bind('hashchange', function(){
38
-
//do some magic
37
+
$( window ).bind("hashchange", function(){
38
+
39
+
//do some magic
40
+
39
41
});
40
42
```
41
43
42
44
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:
@@ -60,7 +68,7 @@ Next we need to address how we can target the appropriate tab to add the selecte
60
68
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:
61
69
62
70
```
63
-
$('a[hash=#first]')
71
+
$("a[hash = #first]")
64
72
```
65
73
66
74
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:
0 commit comments