Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
by
Lessons:26Length:3.5 hours
  • Overview
  • Transcript

5.5 Manual Scrolling Issues

Hello and welcome back to scroll events made easy. We've fixed a couple of issues with our scrolling, especially the issue we came across where if we were to click on the next button, a few times and then refresh the page. It would stop behaving like we expected. Now, the issue that we need to address occurs when we manually scroll the page. So if we're back to the first slide here and I were to click and drag down to the last slide. When I hit next, it's gonna scroll back up to slide two. Because even after clicking and dragging it still thinks we're on the first slide cuz we've created no functionality to detect where we are after we scroll manually. So let's do that in this lesson. Let's jump down into brackets. We're now in the site 22 folder so all the changes we make in this lesson will be saved there, so in order to fix this issue, it's really just a couple of easy lines of code, there's not a whole lot we have to do here. What we need to do is to create another event listener for when we scroll the window. And it's gonna look similar to what we did here for our click functions, our click events, except this time, we're pointing to a scroll event. So the item that we're gonna be scrolling is the window. So in jQuery, we'll put our usual jQuery selector here but instead of putting in a CSS selector here I'm gonna type in the keyword window. So when our window scrolls we're going to trigger a function. So this will work the same as the click event. We're gonna type .scroll instead of click, and then inside of parenthesis we'll create our function. So in the parenthesis for that function, we're still gonna have that event variable called E, it'll have our opening curly brackets. Skip a couple of lines, put our closing curly bracket and then don't forget your closing parenthesis for this scroll method here, and then a semicolon to end that statement. So again, it works just like the click event, it's just a scroll event instead. So any time we run the scroll event, we need to get our current position and update the current position variable. So it's very easy to do. We've already created all the functionality we need here to get that current position. And right now we're using it when the page loads here but we also need to use it whenever we scroll. So we're scrolling here and then once we're done scrolling we're going to call or we're going to point to, first of all our current position variable and set it equal to that getCurrentPosition method that we created. So getCurrentPosition, open and close parentheses, semicolon to end your statement. If anything breaks when you do this, you always need to double check to make sure that your capitalization is identical to the way you did it down here. So down here we had lower case g and then a capital C and a capital P. Make sure you do it the same way here, or you're gonna get some errors. So that should take care of it for us. Let's go ahead and check. Let's save our file. Jump back into our browser, scroll up to the top, and refresh. So by default we can see that our next and previous buttons still work but right now, if I were to hit the next button, it would take us to slide four. Even if I were to click and drag upwards. Let's drag somewhere between slide one and two. Even if we were to drag up to this point, before we created this change, if we hit the next button, it would still go all the way to slide four. But now, hopefully, our current position variable is being updated appropriately whenever we scroll. So now when we hit next, hopefully it will just take us to whatever the next slide is and that works great. And this works really well if we scroll down in between slides. So, we'll scroll down just a little bit so that we're somewhere in between slides two and three. And we can still hit previous to go back to the previous slide or we can go next to finish out that animation. Now you could do a little bit more JavaScript work to take us to, you'll notice that takes us a little further than we wanna go sometimes and that time it didn't detect everything. It didn't detect anything cuz we're already, even if we're between one and two, remember in our code it's still the text that we're at a position of zero if that scroll position is less than a thousand. So, if it's greater than a thousand, it will be one. If it's less than a thousand, it will be set to zero. So even if you drag somewhere between zero and one, or I'm sorry, between slides one and two, I should say, even if you're somewhere in between, the PREVIOUS button's not gonna do anything for you. Now the NEXT button will work fine, and then the PREVIOUS button will work, but if you're in between it's not gonna work so well. But I'm actually happy with that result. I mean, that's a very minor issue. That's something you can go in and really work through yourself if you want to. I could spend another video or two showing you how to do that yourself. But I'm actually happy with those results, I think we're gonna leave it at that. And that gets us to where we're going for our previous and next buttons. So hopefully this dive into Java Script hasn't been too confusing for you. Hopefully you've at least gotten your feet wet a little bit. Even if it didn't make sense the first time it's helpful to go back and watch the lessons again. And the more and more you expose yourself to JavaScript and to programming the easier it's going to become. And I think JavaScript and jQuery are very valuable tools for any web designer, you don't have to be a developer to use JavaScript. You can use JavaScript if you're a designer, I use JavaScript all the time. It's a wonderful tool, it gives you so much more flexibility with what you're able to do in the browser window. So anyways that wraps it up for our previous and next buttons, I'll see you in the next lesson. Thank you for watching.

Back to the top