Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
by
Lessons:15Length:1.7 hours
Animated html5 page transitions 400x277
  • Overview
  • Transcript

5.2 Back and Forth Through History

In the previous lesson we learned how to use the HTML5 History API to manipulate the browser URL, and to use the browser’s back arrow to return to the previous page. In this lesson, you will learn how to get the forward button working as well.

5.2 Back and Forth Through History

Hello and welcome back. In our last lesson we talked about how to manipulate our URL, so that when we click on the join page, even though we're technically still on the index page, we see that URL change, and now when we hit the back arrow, we can go back to the index page. However, we talked about a small problem that we have in that our forward arrow is now gone. So if we hit the back arrow to go back to the homepage, we don't have the option now to go forward to the join page. Well, in this lesson, we're gonna talk about why that's happening and how to fix it. So let's jump back into our main.js and we're now on a new folder. So all the changes we make in this lesson will be saved in these site 11 folder. So in our main.js file, if we scroll down to our event listeners, this is where we created our popState event where we could listen to the forward and back arrow being clicked in the browser. And then it triggers our pageChange function. So when we trigger our pageChange function, we're doing a couple of things then creating a timer to wait for the animations to finish. And then we're running the loadNewPage function. And in the load newPageFunction, this is where we are altering the pushState. And remember I talked about the pushState as an array. It acts kind of like an array. So when we use the pushState method, it actually adds a new element to the end of our history array. So that when we hit the back arrow, it simply goes back to the previous element in that history array. Well the reason we currently don't have a forward arrow is because this pushState is being triggered every time we run this loadNewPage method. And remember, this loadNewPage method is being triggered from the pageChange function which is being triggered not only on our transition link clicks, but also when we click on the back arrow in our browser. So if we click on the back arrow, let's walk through this. It will trigger the pageChange function which will eventually trigger the loadNewPage function which will add a new item to our pushState which is really not what you want to be doing if you're traveling backwards within that history array. We don't wanna add a new item to the pushState, we simply want to travel backwards to the previous item. So what we wanna do is we really only want to trigger this pushState event. We wanna call this pushState method only if we didn't use the back arrow or the forward arrow in order to get to this loadNewPage method. So I'm gonna scroll up. Well, first of all, in our loadNewPage method, we need to know if we got to this method by clicking on a transition link or by using a browser button. So I'm gonna create a new parameter here called usedBrowserBtn and we're gonna set that to either true or false. So when we call our loadNewPage method here, we need to pass in that value. But in our pageChange method, we don't have that value yet. So we also need to add that same value to the pageChange method. And we're gonna call it the same thing, usedBrowserBtn, and we're gonna pass this value into our loadNewPage method. But then, when we call our pageChange method, we also need to pass in a true or false value to tell us whether we use a browser button or not. So when we use the popState, that is triggered by clicking the forward or backwards arrow on the browser. So in this case, it would be true. So we're gonna call the pageChange function. We're gonna pass into it the page, as well as the value, true, because we did use the browser button here. However, when we click on a transition link, we're gonna pass in false, because we did not use a browser button, so when we call the pageChange function here, we need to change that or pass in a value of false. So then, once we get down to our loadNewPage method, we only want to add a new item to our browser's history if we are not using the browser button, if we did not click on a browser button to get to this point. Because remember, the browser button is not supposed to alter the history of our browser, it's supposed to navigate us through that history. And the pushState method is altering the history. So for this, we wanna say if, and then in parentheses, not use the browser button, then we're going to trigger that pushState. So we're only gonna trigger that pushState if we got here by clicking an actual transition link, not by clicking a browser button. So let's save that and see if that does the trick. So we're gonna go back to our page. We're going to refresh the index.html page, we're gonna click on the Join button. That takes us to the Join page, and now we're gonna click the back arrow, and after everything has finished animating, you will see that our forward arrow is now available. And when we click on it, it takes us back to the Join page, just like we wanted it to. So that's how we can make our code a little bit smarter to detect whether we've gotten to the current page either by clicking on a button or by clicking on a browser back or forward arrow. Thank you for watching and I'll see you in the next lesson.

Back to the top