FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 jQuery Click Events

Hello and welcome back to Scroll Events made easy. Now for the final few videos it's gonna get a little bit less easy and a little bit more intermediate as we start writing some of our own JavaScript to automate to the page scrolling. So, we're gonna create a couple of buttons here and when we click on this buttons we're going to animate the scroll position of the page. And we'll animate basically to the next slide. So we're gonna be working with our third project that we created using skrollr.js and we're just gonna add some of our own JavaScript to animate the actual scrolling. So for this first lesson there are two fundamental things that I wanna show you. First of all is how to create a click event handler for a button so that when we click it will actually cause something to happen. And then secondly I wanna show you the basics of animating the scroll position using jQuery's animate function. So I've created a new folder, and its basically got everything that we have all ready been working on so far, as well as our buttons, and the styles for our button. So I've added a little bit to our site, and these can be found in the site 17 folder. So we're gonna be starting with site 17 but I'm also gonna create a new copy of that for the changes we're gonna be making in this lesson. So site 17 will basically be your starter file for this particular lesson and then all of the changes we make in this lesson will save in the site 18 folder. So I'm gonna drag site 18 down to brackets and then I'm gonna jump into my browser and navigate to sight 18/index.html and let's take a quick look at our page. So if we go to our index.html file we can see that's we've added a new div and there's not very much HTML here, it's just a new div with a class of slide nav and then we have two links inside that one with the class of BT and previous, one with BT and next. So if we jump in to our main.css file we can scroll down to this slide navigation section and see all of this CSS that I used to style those buttons. So once we've gotten passed that let's create some JavaScript. So I'm going to go to our index.html file and just to keep things simple I'm going to do everything within this Java, or within this HTML file. So inside of our script tags, I'm gonna start by creating new document-ready function as we've seen before. And again, this is just some syntax that you'll have to get familiar with if you're going to use jQuery. What this does is whatever you put inside this function will wait until the entire page has loaded. And then it will run what's inside it. So that's a good way to make sure that your JavaScript is running after the page loads. Okay, inside that function, I've moved our scroller.init method. And now I wanna talk about creating an event handler for a button. So that when we click on a button it will actually cause something to happen. But before we do that, in case you've never used jQuery before, I need to show you how to point to an element on the stage. And we want to point to our button and if we scroll back up let's point to our next button so it has a class of btn-next and the way jQuery works is it uses CSS selectors to point to items. So it looks like this, we start with a dollar sign and then inside parenthesis we're gonna put a CSS selector here. And that selector needs to be inside quotation marks, and then inside quotation marks we're gonna point to that class. But we do it the same way we do with CSS. Instead of just typing the class name we type dot and then the class name, so btn-next. So this reference right here will point to our next button. And if we wanna create a click event for that next button, we can use the jQuery click function and the way we do that is after our closing parenthesis here. We type .click and then a set of opening and closing parentheses and then inside the parenthesis we'll put our function that we wanna run whenever we click on this particular button. So the way we do that is inside the parentheses here, we're going to type out the word function, open and close parentheses and then inside the parentheses, I'm going to put a value here called E, which stands for event. And then we'll put our opening and closing curly brackets for that function, and then we'll just nudge this closing curly bracket down a couple of lines. So everything that we wanna happen when we click this button here, we're going to put inside this function, or in between the curly brackets for this function. Well just to show you that this click function is working i'm going to hide the button that's being clicked. And the way we do that is in order to point to the button that's being clicked we're going to take dollar sign and then inside parentheses we're going to point to this. This will point to the button itself and then we can say .hide which is another jQuery method which will basically hide it from view. So hopefully the button will disappear whenever we click on it. So let's save that file, jump back over to our browser, refresh our page. And now when I click on the next button, you'll see that it hides itself. Very good. So we know that that click even works. So the next step is to learn how to animate the scroll position. So now that we've gotten rid of that hide method, I'm just gonna save our file. And in the next lesson we'll learn how to animate the scroll position using jQuery. Thank you for watching, and I'll see you then.

Back to the top