1 00:00:00,600 --> 00:00:02,070 A lot of JavaScript and 2 00:00:02,070 --> 00:00:07,160 jQuery programming involves responding to user interactions on a page. 3 00:00:07,160 --> 00:00:10,770 These interactions like clicking on a link, typing into a form, or 4 00:00:10,770 --> 00:00:14,100 mousing over a photo, are called events. 5 00:00:14,100 --> 00:00:18,470 You can attach programming to events to add interactivity to a web page. 6 00:00:18,470 --> 00:00:20,930 For example, when a visitor clicks on an image 7 00:00:20,930 --> 00:00:24,240 you can make a larger version of that image pop open on the page. 8 00:00:24,240 --> 00:00:26,950 The event is the click and 9 00:00:26,950 --> 00:00:31,110 the programming making the larger image pop up is the response to that event. 10 00:00:32,330 --> 00:00:35,710 We're used to events that are triggered by a user, like clicking a link or 11 00:00:35,710 --> 00:00:37,920 pressing a key on a keyboard, but 12 00:00:37,920 --> 00:00:41,240 an event is really just something that happens at a specific time. 13 00:00:42,290 --> 00:00:44,460 To make their plugins more flexible and 14 00:00:44,460 --> 00:00:48,850 useful many plugin creators will add events to their plugins. 15 00:00:48,850 --> 00:00:51,520 These usually aren't events triggered by the user. 16 00:00:51,520 --> 00:00:56,240 There's simply something that happens at a particular point when the plugin runs. 17 00:00:56,240 --> 00:01:00,940 For example, the sticky nav plugin has an event named sticky start. 18 00:01:00,940 --> 00:01:05,390 The sticky start event is triggered when the element on the page sticks. 19 00:01:05,390 --> 00:01:08,510 We added the sticky nav plugin to our navigation bar so 20 00:01:08,510 --> 00:01:12,510 that when the user scrolled down the navigation bar stuck. 21 00:01:12,510 --> 00:01:15,710 The moment that plugin sticks the element to the page, 22 00:01:15,710 --> 00:01:17,880 the sticky start event is triggered. 23 00:01:18,880 --> 00:01:21,460 And, you can add your own programming when that happens. 24 00:01:21,460 --> 00:01:25,970 For example, we could change the HTML of the navigation bar when it sticks. 25 00:01:25,970 --> 00:01:28,800 Add another button for example, or change the logo. 26 00:01:28,800 --> 00:01:29,810 Let's see how this works. 27 00:01:31,590 --> 00:01:36,620 We saw in the last video that you could control the look of a stuck page element, 28 00:01:36,620 --> 00:01:39,640 like our navigation bar, by using CSS. 29 00:01:39,640 --> 00:01:43,160 We created a style that used the is sticky class, 30 00:01:43,160 --> 00:01:48,040 that's added by the plug in when the page element is fixed to the top of the page. 31 00:01:48,040 --> 00:01:52,090 But, you can also make your own programming run when an element sticks, 32 00:01:52,090 --> 00:01:53,920 and when it's unstuck. 33 00:01:53,920 --> 00:01:57,550 If you want to follow along, launch the workspace on this page, or 34 00:01:57,550 --> 00:01:59,920 download the project files for this course. 35 00:01:59,920 --> 00:02:04,240 To add our own programming in response to events from the Sticky.JS plugin, 36 00:02:04,240 --> 00:02:08,210 we take advantage of jQuery's own Event Handling system. 37 00:02:08,210 --> 00:02:12,120 If you don't understand how events work in jQuery see the teacher's notes for 38 00:02:12,120 --> 00:02:13,720 more information. 39 00:02:13,720 --> 00:02:15,190 Now let's start with the basics. 40 00:02:15,190 --> 00:02:19,280 We first select the element that has the sticky plugin applied to it. 41 00:02:21,990 --> 00:02:24,370 We then call the jQuery on method. 42 00:02:26,450 --> 00:02:30,400 This method is used to apply programming in response to events. 43 00:02:30,400 --> 00:02:33,020 Like a mouse click or scrolling. 44 00:02:33,020 --> 00:02:35,199 This method takes two arguments. 45 00:02:35,199 --> 00:02:39,230 The first is a string which is the name of the event. 46 00:02:39,230 --> 00:02:42,770 For example, for a mouse click the event is called click. 47 00:02:44,470 --> 00:02:47,340 Plugin programmers can add their own custom events to 48 00:02:47,340 --> 00:02:49,440 jQuery's event model as well. 49 00:02:49,440 --> 00:02:53,438 In the case of the Sticky.JS plugin, there's a sticky-start event. 50 00:02:55,841 --> 00:02:58,550 This is the first argument. 51 00:02:58,550 --> 00:03:01,600 The second is an anonymous function. 52 00:03:01,600 --> 00:03:05,020 It's called anonymous, because you don't give it a name. 53 00:03:05,020 --> 00:03:06,371 The basic structure looks like this. 54 00:03:09,091 --> 00:03:13,594 Any code you place inside the curly braces here will run whenever the header element 55 00:03:13,594 --> 00:03:16,070 sticks to the top of the window. 56 00:03:16,070 --> 00:03:18,480 You can literally write anything you'd like. 57 00:03:18,480 --> 00:03:21,990 You could output to the console, you could send off an Ajax request, or 58 00:03:21,990 --> 00:03:24,600 simply change the content on the page. 59 00:03:24,600 --> 00:03:28,440 In this case, let's take this tagline, We Build Apps, and 60 00:03:28,440 --> 00:03:31,610 change it to, We Build Great Apps, when the header sticks. 61 00:03:33,110 --> 00:03:34,371 Let's look at the HTML for this. 62 00:03:38,241 --> 00:03:42,350 Okay, here's the header, and here's that tagline. 63 00:03:43,770 --> 00:03:47,340 The H1 tag here has a class named description so 64 00:03:47,340 --> 00:03:52,280 we can use jQuery to select that class and that tag and change its text. 65 00:03:53,320 --> 00:03:54,461 First, let's select that element. 66 00:03:57,641 --> 00:03:59,682 After jQuery selects it, 67 00:03:59,682 --> 00:04:04,421 we can use the HTML method to change the HTML inside that tag. 68 00:04:08,381 --> 00:04:14,220 JQuery's HTML method takes a string, which can include HTML tags. 69 00:04:14,220 --> 00:04:17,651 jQuery then replaces whatever was in that element with this new string. 70 00:04:19,471 --> 00:04:22,831 I'll save the files, and preview the workspace. 71 00:04:25,621 --> 00:04:30,025 Cool, the text changes when I scroll down the page. 72 00:04:30,025 --> 00:04:33,040 Bu, when I scroll back to the top, the text doesn't change. 73 00:04:34,640 --> 00:04:35,140 To do that, 74 00:04:35,140 --> 00:04:39,364 we need to use the second custom event supplied by the Sticky.js plugin. 75 00:04:39,364 --> 00:04:43,769 It's called sticky-end, that's sticky hyphen end. 76 00:04:45,200 --> 00:04:49,430 Now, why don't you pause the video right here, and try to make this work yourself? 77 00:04:49,430 --> 00:04:54,750 Select the page element, use the On method, and the sticky-end event, 78 00:04:54,750 --> 00:04:58,130 to change the HTML back to just, We Build Apps. 79 00:04:58,130 --> 00:04:59,781 Go ahead, pause the video and give it a try. 80 00:05:03,001 --> 00:05:05,130 Did you give it a try? 81 00:05:05,130 --> 00:05:07,620 Well, it's nearly the same code we wrote earlier. 82 00:05:07,620 --> 00:05:13,890 In fact, I can just select this, copy it, and paste the copy. 83 00:05:13,890 --> 00:05:18,350 All I need to do is change sticky start to sticky end. 84 00:05:18,350 --> 00:05:20,220 Then, I'll get rid of these strong tags, so 85 00:05:20,220 --> 00:05:24,240 it goes back to the original sentence, and we can check it out. 86 00:05:24,240 --> 00:05:25,446 Let's save the files and preview it. 87 00:05:27,661 --> 00:05:30,200 Plugin events are cool. 88 00:05:30,200 --> 00:05:34,220 They let you customize what happens when a plugin kicks into action. 89 00:05:34,220 --> 00:05:36,010 Not all plugins have events. 90 00:05:36,010 --> 00:05:39,030 And you should realize that a plugin event is just 91 00:05:39,030 --> 00:05:41,390 the creation of the plugin's author. 92 00:05:41,390 --> 00:05:44,000 They aren't just magically part of the plugin. 93 00:05:44,000 --> 00:05:45,980 A plugin creator adds events. 94 00:05:47,010 --> 00:05:50,020 In the next video, I'll give you a challenge to practice with 95 00:05:50,020 --> 00:05:52,650 the events supplied by the sticky JS plugin.