Understanding Plugin Events

A lot of JavaScript and 0:00 jQuery programming involves responding to user interactions on a page. 0:02 These interactions like clicking on a link, typing into a form, or 0:07 mousing over a photo, are called events. 0:10 You can attach programming to events to add interactivity to a web page. 0:14 For example, when a visitor clicks on an image 0:18 you can make a larger version of that image pop open on the page. 0:20 The event is the click and 0:24 the programming making the larger image pop up is the response to that event. 0:26 We're used to events that are triggered by a user, like clicking a link or 0:32 pressing a key on a keyboard, but 0:35 an event is really just something that happens at a specific time. 0:37 To make their plugins more flexible and 0:42 useful many plugin creators will add events to their plugins. 0:44 These usually aren't events triggered by the user. 0:48 There's simply something that happens at a particular point when the plugin runs. 0:51 For example, the sticky nav plugin has an event named sticky start. 0:56 The sticky start event is triggered when the element on the page sticks. 1:00 We added the sticky nav plugin to our navigation bar so 1:05 that when the user scrolled down the navigation bar stuck. 1:08 The moment that plugin sticks the element to the page, 1:12 the sticky start event is triggered. 1:15 And, you can add your own programming when that happens. 1:18 For example, we could change the HTML of the navigation bar when it sticks. 1:21 Add another button for example, or change the logo. 1:25 Let's see how this works. 1:28 We saw in the last video that you could control the look of a stuck page element, 1:31 like our navigation bar, by using CSS. 1:36 We created a style that used the is sticky class, 1:39 that's added by the plug in when the page element is fixed to the top of the page. 1:43 But, you can also make your own programming run when an element sticks, 1:48 and when it's unstuck. 1:52 If you want to follow along, launch the workspace on this page, or 1:53 download the project files for this course. 1:57 To add our own programming in response to events from the Sticky.JS plugin, 1:59 we take advantage of jQuery's own Event Handling system. 2:04 If you don't understand how events work in jQuery see the teacher's notes for 2:08 more information. 2:12 Now let's start with the basics. 2:13 We first select the element that has the sticky plugin applied to it. 2:15 We then call the jQuery on method. 2:21 This method is used to apply programming in response to events. 2:26 Like a mouse click or scrolling. 2:30 This method takes two arguments. 2:33 The first is a string which is the name of the event. 2:35 For example, for a mouse click the event is called click. 2:39 Plugin programmers can add their own custom events to 2:44 jQuery's event model as well. 2:47 In the case of the Sticky.JS plugin, there's a sticky-start event. 2:49 This is the first argument. 2:55 The second is an anonymous function. 2:58 It's called anonymous, because you don't give it a name. 3:01 The basic structure looks like this. 3:05 Any code you place inside the curly braces here will run whenever the header element 3:09 sticks to the top of the window. 3:13 You can literally write anything you'd like. 3:16 You could output to the console, you could send off an Ajax request, or 3:18 simply change the content on the page. 3:21 In this case, let's take this tagline, We Build Apps, and 3:24 change it to, We Build Great Apps, when the header sticks. 3:28 Let's look at the HTML for this. 3:33 Okay, here's the header, and here's that tagline. 3:38 The H1 tag here has a class named description so 3:43 we can use jQuery to select that class and that tag and change its text. 3:47 First, let's select that element. 3:53 After jQuery selects it, 3:57 we can use the HTML method to change the HTML inside that tag. 3:59 JQuery's HTML method takes a string, which can include HTML tags. 4:08 jQuery then replaces whatever was in that element with this new string. 4:14 I'll save the files, and preview the workspace. 4:19 Cool, the text changes when I scroll down the page. 4:25 Bu, when I scroll back to the top, the text doesn't change. 4:30 To do that, 4:34 we need to use the second custom event supplied by the Sticky.js plugin. 4:35 It's called sticky-end, that's sticky hyphen end. 4:39 Now, why don't you pause the video right here, and try to make this work yourself? 4:45 Select the page element, use the On method, and the sticky-end event, 4:49 to change the HTML back to just, We Build Apps. 4:54 Go ahead, pause the video and give it a try. 4:58 Did you give it a try? 5:03 Well, it's nearly the same code we wrote earlier. 5:05 In fact, I can just select this, copy it, and paste the copy. 5:07 All I need to do is change sticky start to sticky end. 5:13 Then, I'll get rid of these strong tags, so 5:18 it goes back to the original sentence, and we can check it out. 5:20 Let's save the files and preview it. 5:24 Plugin events are cool. 5:27 They let you customize what happens when a plugin kicks into action. 5:30 Not all plugins have events. 5:34 And you should realize that a plugin event is just 5:36 the creation of the plugin's author. 5:39 They aren't just magically part of the plugin. 5:41 A plugin creator adds events. 5:44 In the next video, I'll give you a challenge to practice with 5:47 the events supplied by the sticky JS plugin. 5:50