by
Lessons:15Length:1.7 hours
Animated html5 page transitions 400x277
  • Overview
  • Transcript

3.2 Loading External Content

Now that we have hijacked the menu clicks, in this lesson you will learn how to create a dynamic HTML element in JavaScript and then load external HTML files into that element.

3.2 Loading External Content

Hello and welcome back. In this lesson, we're gonna get started trying to pull in our external HTML from our join page into our home page. So the files we're starting with here are the files that we ended with in the site02 folder. But you'll notice that I've moved them all into a new folder called site03. So all the changes we make in this lesson will be saved in site03. And now that we're talking about loading external content, let's talk about our URL. You'll notice that I am using localhost here, which means that I'm not just opening my HTML files in a browser. Instead, I'm actually running a local web host. I'm actually using XAMPP, X-A-M-P-P, which is a piece of software that packages together Apache, MySQL, and PHP. And all I'm really using this for in this course is Apache. You'll notice, Apache is the only thing I've got running here. And if you're using XAMPP, there are a few different software packages that you can use that run Apache, or you can just run Apache by itself. I'm gonna leave that up to you to figure out how to set that up. But if you do a search for XAMPP, X-A-M-P-P, you can find the website pretty easily, and then you can install it. And then you'll notice that the folder structure I'm using here is all inside the xampp folder under htdocs. So if you're using XAMPP to run Apache, then when you navigate to local host in your browser, it will navigate to the htdocs.folder. And then you'll notice I'm pointing to the page transitions folder inside that htdocs folder, and the site03 folder inside of that. So I just wanted to point that out. And the reason that we're using an Apache server here instead of just opening up our files, is because if we just open up our files, we're gonna get some errors when we try to load in some external HTML. So you have two options, you can either upload all of your files to a web server somewhere, and edit and test that way, which is a real pain. Or you can just install Apache on your local machine and run it via local host and you shouldn't have any problems. Now in order to show you this, I can prove to you that it's gonna break this way. I'm gonna open up a new browser window, I'm gonna paste in our URL, and I'm gonna go to our site-final folder. And I'm gonna try to navigate to the join page. And when I do, you'll see that the animations happen just fine because I'm still pointing to local host. But if I change that to d:/xampp, and yours might be located on a different location on your computer. But this is where it's located on mine, and then htdocs, and then the rest of the URL. So now if I hit Enter, and I need to go back to the home page first, so let's go to index.html here. Now you'll notice if I click on the join link, our initial animation occurs, but it doesn't continue. And if I open up my console by hitting F12, you'll see that we got this cross origin request error. A cross origin request error will trigger if you're trying to load HTML from a different domain. So if you owned ilovecraigcampbell.com and you tried to pull in each email via AJAX from another website with a different domain name, then this is the kind of error you would get. You would get a cross origin request. Well, unfortunately, most major browsers also give you this error if you're simply trying to load files locally. And so in order to avoid that, we simply use Apache. So that's why we're pointing to local host here, instead of just opening up the file from Windows Explorer. And now that we've got site03 opened back up. We're gonna jump into our code editor and we're gonna continue. So far, we've created this click event that created a new URL inside this variable. And we're pulling that URL from the href of the link that we clicked on. And then we're passing that new URL into this pageChange function here. Right now, all we're doing with this pageChange function is we're pointing the window location to that new URL, which is basically just setting up the link to do what it's supposed to do by default. Now obviously, that's not what we wanna do. Instead of just navigating to this new page, we wanna pull in bits and pieces of that new page into our current page. And then once we get that working, then we can worry about the animated transition between pages. So inside this pageChange function, we're not going to navigate window.location to this new URL. So we can get rid of the line that we have there in that pageChange function. Instead, what we're gonna do is we're gonna create a new container. And this is just gonna be some raw HTML here. So I'm gonna create a new container here in a variable, and I'm gonna set this equal to, I'm gonna start with just quotation marks, but we're gonna change that in a second. And inside quotation marks here, I'm gonna create a new div. And we're gonna set that ID equal to loadingContainer, and then we'll put a closing div here. So it's just some plain HTML that we're putting inside a string. Now we need to point to this as a jQuery object. So in order to do that, we need to surround this with a jQuery selector. So we've just put a dollar sign in front of it and parentheses around it. So now what we're gonna do is we're gonna load our external HTML into this loadingContainer. Then once we've loaded it into that container, then we can look inside that HTML to find the bits and pieces that we need. But first, let's just make sure that we can get it loaded. So we've created our container here, now I'm going to use the jQuery function load. And the way we get that is container.load. And then inside parentheses, the first thing we need is the URL that we're gonna load this from. And we're gonna load this from the URL that we passed into this pageChange function, which we called newURL. So we'll just paste that there. And then using this load function, the next thing you would put inside the parentheses is comma, space, and then the function that you want to run whenever that content has finished loading. So anything that we want to happen after this content in this URL has finished loading, anything we want to happen then is going to happen inside this function that we just created. So for now, all I really wanna do is to make sure that the join page is loading properly inside our container. So what I'm gonna do is I'm gonna do a console.log of our container. And we'll see how that works. So let's jump back into our browser. And I'm gonna refresh site03/index.html. And I'm gonna open up my console by hitting F12, I'm using Chrome here. And make sure you have the console tab selected, and then we're gonna click on Join. And when we do that, we do see some data in our console. And we do see that it's pointing to a div with an ID of loadingContainer, which is that container we just created. So let's expand that out and see what's inside it. And if we expand it out a couple of times, we can see the base URL here. And then if we look down a little bit further, we can see these child nodes and we can expand those out, excuse me. And we can see a lot of stuff in here, for example, we have this page-join ID. If we expand that out, we can see what's inside that, and we can see child nodes of that. So we've loaded the HTML for our entire join page into this new, if we go back to our code editor here, into this new container that we created. So if we go back to Chrome, you'll notice in the inner HTML section that we have the entire HTML document there. And once we've got that HTML document loaded, we can start jumping into that using jQuery to find the bits and pieces that we need, and then we can replace what's on our current page with those bits and pieces. So we'll get started with that in the next lesson. Make sure you've got all your files saved, and we'll move on.

Back to the top