Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.7 hours
Animated html5 page transitions 400x277
  • Overview
  • Transcript

3.1 Intercepting Link Clicks

Before we create our animations, we need to talk about loading external content from another HTML file. In this lesson you will lay the groundwork for this functionality by intercepting menu clicks and preventing their default behavior.

3.1 Intercepting Link Clicks

Hello and welcome back. We've already talked a little bit about what we're trying to accomplish in this course. And there are actually three separate things that we need to accomplish. The first thing we need to accomplish is we need to load external HTML from another HTML file. So we're gonna take this other page, join.html, and we're gonna load bits and pieces of this page into our index page, and replace the content that's currently there. So our browser bar, or our navigation bar up at the top, is not going to change, but we're gonna load in other content into the main hero image here, and the main content area below that. So again, that's the first thing we're trying to accomplish. We're trying to pull in external HTML. The second thing we're going to try to accomplish is we're going to animate from our current state to the new state once we've loaded that new HTML in. So we want to animate out what we currently see, and when the new page loads, we want to animate that content in. And the one thing that's missing from these first two things we're trying to accomplish is that our URL is never changing. We're staying on index.html the whole time. And for the sake of being able to go backwards and forwards in your browser history, we wanna make sure that that URL changes. So that when we click on the Join button, not only are we pulling in external content, not only are we animating from one state to another. But we're also going to change the URL that we see in the browser bar. And we're also gonna change the tittle up here at the top. So again, the first thing we want to do is we wanna be able to load in external content. So what I want to get started on in this lesson is loading the content from the Join page, and then once we get that content loaded in, we're going to swap it out with the content that's currently there. So I've got the site01 folder open here, and I'm actually going to save that in a new folder. So if you're following along, you wanna go ahead and open up site01, because that's gonna be our starting point. But all of the changes that we make in this particular lesson are gonna be saved in this new folder that I'm creating, called site02. So I'm gonna open up site02 with Visual Studio Code, and I'm gonna go ahead and close out the site01 folder. And then we can open up that index file. And in our browser, we're gonna navigate over to the site02 folder, and there we go. So again, we've got our Home page and our Join page. And when we click on the Join button, we want to pull in content from that Join page and replace what's currently there. So let's talk about how to do that. Let's jump into our index.html page, and again, you'll notice that I've given these anchor tags in our main navigation, I've given them a class of transition-link. And we're gonna use this transition-link class in jQuery to basically intercept the click. So when somebody clicks on that button, we're going to intercept the click, we're going to prevent the default behavior of that click from happening. And then we're going to instead load bits and pieces of that HTML page into the current page. Now, you don't have to use the transition-link class to do this. If you wanted to just make sure, for example, that all of the buttons inside this main-nav-menu had that functionality, then you could certainly do it that way. But if you did have some links, let's say for some reason the Contact page, we don't want it animating at all. We could take away the transition-link for that particular page, and we wouldn't have to rely on every single list item inside this main-nav-menu triggering that behavior. So we're gonna use that transition-link class, and again, we're going to intercept the click and then cause something different to happen. So let's jump into our JavaScript folder, into the main.js file. And as we've already seen, there's already some content here in this main.js file where we are registering some hover events. And it's the hover event for our menu items here, so that underline is basically animating when you move your mouse cursor over the different links. And we're gonna use this main.js file as our starting point. So what I wanna do is I wanna create another event listener for these transition links, a click event listener for those transition links. So I'm going to include that In our registerEventListeners function here, and I'll put it below our hover event. Skip a couple of lines here. And I'm gonna point to context, which if you look up here in our variables, context is simply pointing to the body of our document. So we're gonna say context.on, and then inside parentheses we have click inside quotation marks. And then our next argument for this on method is going to be the item inside our body, inside this context that we're clicking on. So when we click on an item that has a class of transition hyphen link, then we want to run this function. And one thing we need for this function declaration is we need an event variable here. You can call it event, or to keep short and sweet, you can just call it e, that's what I like to do. And the first thing we're gonna do is we're gonna say e.preventDefault, open and closed parentheses, semicolon to end our statement. And what that should do is that should prevent the default behavior for this button that we're clicking on. So if we save that, go to our index.html page, any of these inker tags with that class of transition link, those click events should not work anymore. So when I click on the Join button, it should intercept this link and keep us from going to join.html. So let's see if that works, we'll go to our browser and refresh the page. And when we click on Join, sure enough, nothing happens, so that's a good start. We'll go back to our main.js page and we'll continue. Now, since our link already has some important information about where we want to go, i.e., this join.html page. We can use that href attribute to grab the URL of the page that we need to load information from. So in order to do that, let's jump back into our JavaScript file. And we're first going to prevent the default behavior, and then after that, I'm gonna create a variable, and I'm gonna call that variable newURL. This is gonna be the URL of the page we're trying to go to. And when we click on one of these buttons, with a class of transition-link, we can access that button by using the jQuery this selector. And the way we do that is we type a $, and then in parentheses, we type in the word, this. So we're gonna say, this.attr, which is for attribute, and we're looking at the href attribute. And then we'll put a semicolon at the end of that statement. So, this line here will take that href attribute, which is currently equal to join.html for the join button, and it will store that in this new URL variable. Well, once we get that URL, a lot is going to happen. We're gonna cause some animations, we're gonna load some content. We're going to update the URL of the page. So there's a lot that's gonna happen. I don't want to include all of that in this click event listener. Instead we'll go ahead and create a new function outside of our registerEventListeners function. So we'll create a new function here, and I'm gonna call this function pageChange, open and close parenthesis, and then our opening and closing curly brackets for that function. And for this function, we're going to pass in a URL and use that URL to determine where we're going to load our information from. So inside the parentheses, for this pageChange function, we're going to accept a new URL. So we're gonna accept a new variable called new URL it's just a coincidence that I'm calling them the same thing here and here. I could call it something different. But I'm gonna call it new URL, and then inside this function for now, we're gonna do something much different later, but for now, I'm just gonna say window.location = newURL. And then inside our click event we're going to call on that pageChange function and pass into it this new URL we created up here. So on the next line here, we'll just say pageChange. And again, we're gonna pass into it this new URL variable that we just calculated here. So basically, what this is gonna do is it's going to make our link work again. So we've prevented the default behavior of the link, but then we've taken the href attribute of that link and stored it in this newURL variable. And then passed that newURL variable into this pageChange function, which is basically just taking our location and setting it equal to that newURL variable. So in essence, what we're doing is we're restoring the default functionality in a really roundabout way. So if we go back to our page now and refresh again, you'll see that when we click on Join, that it works. Now, we really haven't accomplished anything here. All we've done is in a very roundabout way, we've made the link work the way it's supposed to work in the first place. But we're going to add a lot more to this pageChange function as we move forward, and it's gonna be doing a lot of stuff inside this function. But that at least gets us to a good starting point. I like to build these things one little piece of functionality at a time, to make sure that everything is working as planned. So thank you for watching, and we'll continue in the next lesson.

Back to the top