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.
44
44
45
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):
@@ -53,15 +53,15 @@ The left and right key codes are 37 and 39 respectively. So we only want to acti
53
53
// go right
54
54
}
55
55
});
56
-
</div>
56
+
```
57
57
58
58
##Triggering the Click on the Right Link
59
59
60
60
Triggering a click event is easy, but the problem we have to solve is finding the right link to click. Since this slider adds a class of current to the currently active link, we’ll use that as our anchor point, and try to find the link before (if the left cursor key is pressed) and after (if the right cursor key is pressed).
61
61
62
62
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:
In the case above, the “next” link is #2. Currently there’s no previous available, but we’ll let jQuery handle this for us.
77
77
78
78
To find the next link, first we need to grab the link that’s currently selected:
79
79
80
-
<divclass="example"markdown="1">
80
+
```
81
81
$('.coda-slider-wrapper ul a.current')
82
-
</div>
82
+
```
83
83
84
84
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.
85
85
86
-
<divclass="example"markdown="1">
86
+
```
87
87
$('.coda-slider-wrapper ul a.current')
88
88
.parent() // moves up to the li element
89
89
.next() // moves to the adjacent li element
90
90
.find('a') // moves down to the link
91
91
.click(); // triggers a click on the next link
92
-
</div>
92
+
```
93
93
94
94
Since jQuery continues to allow chained methods to work even if there’s no elements found, we can also use prev() in the place of next() when current is on the first element and the code will work just fine still.
95
95
96
96
Let’s plug this code in to the keyboard event handler:
@@ -111,11 +111,11 @@ Let’s plug this code in to the keyboard event handler:
111
111
$('.coda-slider-wrapper ul a.current').parent().next().find('a').click();
112
112
}
113
113
});
114
-
</div>
114
+
```
115
115
116
116
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.
@@ -132,7 +132,7 @@ This code can be simplified since a lot of it is repetitive aside from the ‘ne
132
132
$('.coda-slider-wrapper ul a.current').parent()[direction]().find('a').click();
133
133
}
134
134
});
135
-
</div>
135
+
```
136
136
137
137
##Where does this all go?
138
138
@@ -142,15 +142,15 @@ Since we’re going in after the slider plugin is run, so it should go *directly
142
142
143
143
In Mathieu’s code, he had the following:
144
144
145
-
<divclass="example"markdown="1">
145
+
```
146
146
$().ready(function() {
147
147
$('#coda-slider-1').codaSlider();
148
148
});
149
-
</div>
149
+
```
150
150
151
151
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:
152
152
153
-
<divclass="example"markdown="1">
153
+
```
154
154
$().ready(function() {
155
155
$().ready(function() {
156
156
$('#coda-slider-1').codaSlider();
@@ -172,7 +172,7 @@ $().ready(function() {
172
172
}
173
173
});
174
174
});
175
-
</div>
175
+
```
176
176
177
177
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
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,23 +34,23 @@ This process was our original code, and most of it needs to stay in place. The c
34
34
35
35
So we listen for the hashchange event, just like we might listen for a click event:
36
36
37
-
<divclass="example"markdown="1">
37
+
```
38
38
$(window).bind('hashchange', function(){
39
39
//do some magic
40
40
});
41
-
</div>
41
+
```
42
42
43
43
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:
At this point all the references to this need to change, because in our original version this referred to the link that had be clicked. Now we need to determine the link based on the window URL. We can get the newly navigated URL using window.location. This is an object that represents part of the URL, and as such, gives as just the hash by itself:window.location.hash. This is good.
56
56
@@ -60,9 +60,9 @@ Next we need to address how we can target the appropriate tab to add the selecte
60
60
61
61
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:
62
62
63
-
<divclass="example"markdown="1">
63
+
```
64
64
$('a[hash=#first]')
65
-
</div>
65
+
```
66
66
67
67
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.
68
68
@@ -74,7 +74,7 @@ Then one last change to make to our code - we need to trigger the hashchange eve
Once last note: if we trigger the hashchange event, and there’s no hash on the URL, then we need to give it a default. In this case I’ve given it #first as a default so that it always lands on the first tab if there’s nothing pre-selected.
Copy file name to clipboardExpand all lines: page/performance/append-outside-loop.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,18 +7,18 @@ tags: performance
7
7
Touching the DOM comes at a cost; if you're appending a lot of elements to the
8
8
DOM, you will want to append them all at once, rather then one at a time. This is common problem when appending elements within a loop.
9
9
10
-
<javascript>
10
+
```
11
11
$.each(myArray, function(i, item) {
12
12
var newListItem = '<li>' + item + '</li>';
13
13
$('#ballers').append(newListItem);
14
14
});
15
-
</javascript>
15
+
```
16
16
17
17
One common technique is to leverage a document fragment. During each iteration
18
18
of the loop, you append the element to the fragment rather than the DOM
19
19
element. After the loop, just append the fragment to the DOM element.
20
20
21
-
<javascript>
21
+
```
22
22
var frag = document.createDocumentFragment();
23
23
24
24
$.each(myArray, function (i, item) {
@@ -29,18 +29,18 @@ $.each(myArray, function (i, item) {
29
29
});
30
30
31
31
$('#ballers')[0].appendChild(frag);
32
-
</javascript>
32
+
```
33
33
34
34
Another technique, which is quite simple, is to build up a string during each iteration of the loop. After the loop, just set the html of the DOM element to that string.
35
35
36
-
<javascript>
36
+
```
37
37
var myHtml = '';
38
38
39
39
$.each(myArray, function(i, item) {
40
40
myHtml += '<li>' + item + '</li>';
41
41
});
42
42
43
43
$('#ballers').html(myHtml);
44
-
</javascript>
44
+
```
45
45
46
46
There are of course other techniques you could certainly test out; a great way to test the performance of these is through a site called [jsperf](http://jsperf.com). This site allows you to benchmark each technique and visually see how it performs across all the browsers.
0 commit comments