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.3 Finishing Touches

Time for some finishing touches! In this lesson you will learn how to update your title on page change, as well as how to make your animated transitions backwards compatible for browsers that don’t support the History API.

5.3 Finishing Touches

Hello, and welcome back. In this lesson, I wanna just put a couple of finishing touches on our site. The first thing I want to do, very quickly, is I want to update the title when we go to a new page. So if I go to index.html here, and then click on Join, everything changes, even our URL changes, everything looks great. But our page title has not changed. Our page title still says Page Transitions. Whereas if we navigate to join that HTML inner browser bar, you'll see that the title says Join us. So I wanna make sure that that title actually changes whenever we click on the Join button or when we click back on the home button. So let's jump into our code. And we're now in the SITE12 folder. So all the changes we make in this lesson will be saved there. And this is a pretty simple process here. We're gonna go down to our loadNewPage method. And the first thing I wanna do is I wanna grab the new title from the HTML that's been loaded into our loading container here. And we've done something similar with our HTML. We've done a container.find, and we've found our main content inside that HTML that's been loaded. And we've done something similar with the page ID. Now I wanna do it with the title. So after everything for our page ID, I'm gonna create a variable here called newTitle. And we're gonna do something similar to what we've done before, we're gonna do container.find and what we're looking for is the title, so we're looking for an element called title. And even though that element is in the head of the HTML document, we can still find it this way. The only thing we need to add to this is inside square brackets, we need to put the number 0 to indicate that we're only gonna grab the first title that we find. Now, you're not gonna find more than one title in an HTML file, but it's not gonna work if you don't do it this way. So we're gonna put our square brackets immediately after title. There's no spaces there. To indicate that we're going to grab the first title that we find. And then we're gonna grab the text from that title element. And we can do that by typing .text. So the title for our Join page, once we click on the Join button should now be stored in this newTitle variable. Now someday, we're gonna be able to put that new title into this pushState method for our second argument here. So for our second argument, we can just change that to newTitle, but that's not gonna work for very many browsers at the time of this recording. So if I were to save that, jump over to our site and refresh it, and then click on Join, You'll see that that doesn't actually work. I'm in Chrome right now. And this is the latest version of Chrome at the time of this recording. And that doesn't work just yet. However, that method does accept that value there. Just at this point, not a lot of browsers do anything with it. So we need to actually do that manually. So the way we're gonna do that is immediately after we create that newTitle variable, we're gonna find the title on our current page. Not within our container any more, but we're gonna find the title on our current page, and we'll do that with a jQuery selector here. And we're simply gonna say .html, and then inside parentheses for the html method we're gonna pass in our newTitle. That we just calculated up here, and that should do the trick for us. So we're gonna save that again, go back to our browser and refresh the page, and now when we click on Join, once our new page loads, you'll see that the title changes as well up here at the top. So we've now changed our title and then the last finishing touch I wanna put on the site, well, actually, there's two more things. One thing I wanna do is I wanna get rid of this timestamp down here now, because we don't need that anymore. So I'm just gonna go to our index.html and I'll leave that there for you. But I am just gonna comment it out, and I believe it's down here. I can't remember where I put it. It's right here at the very top, timeofday. So I'm just gonna grab that and comment that out, and then in our JavaScript, I'm gonna get rid of this line of code here by commenting it out as well, where it's setting the timeofday there. That way it'll just clean up our page a little bit, but then the last thing that I do wanna do here is I wanna make this compatible with all browsers. So even if you're using a browser that doesn't support the history API, I want this to continue to work. And so the way I'm gonna do that is I want to detect whether your browser supports or recognizes the history API. And if it does, then we'll go ahead and do everything we've already done. If not, then we're just gonna navigate from one page to the next. So, let's see how that works. We're gonna go back into our code. And in our register event listeners, we have our click event, for our transition links. And this is what causes all of these fancy page changes. We're preventing the default behavior of the link and then we're doing our own thing. And then we have the popstate event, which is very specific to the history API. But what I wanna do is I only want to run these two items if the history API exists on the current browser or if it's supported on the current browser. And a very easy way to do that is we can simply say if and then put in the word history here. And what that does is if that history is not recognized by the current browser, or in other words, if that history object doesn't exist for the current browser, then it will simply ignore, it will treat that as a false and ignore all of this code. Otherwise, if the history does exist, then it will just treat it like a true. If you just say, if and then put the name of an object there, then if that object exists, it'll treat it like a true value. It's called a truthy value. So in other words, we're only gonna run all of this code we've been working on if our browser supports the the history API, otherwise it's going to work just like an old school HTML page. And that's why we built out the entire join.html page instead of just building out the little bits and pieces that we needed. This way if we've built out the whole page, then even if the user is using a browser that does not support the history API, they'll still be able to click to go from page to page. So let me prove to you that that works. We're gonna go back to our JavaScript page and for now I'm just gonna change this value to false. So no matter what happens, it's just going to ignore all of this code here. And this will basically treat it the same way as if the history API did not exist or was not supported for the browser we're using. So we'll save that, go back to our browser and refresh. And we can click around from the Index page to the Join page just fine. There's no transitions or anything like that, but it's fully backwards compatible. And now if we go back and just change that to if history and save that. Then we refresh the page and click on Join, we'll see our animations occurred just like we expected them to. So that wraps it up for our finishing touches for our site. Thank you for watching and I'll see you in the next video.

Back to the top