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

3.3 Replacing HTML Content

Now that we have loaded the content we need for our new page, in this lesson you will learn how to use jQuery to search through that HTML for the content you will be using to replace the existing page content.

3.3 Replacing HTML Content

Hello and welcome back. In our last lesson, we got to the point, we opened our console here, where if we click on the Join button we've hijacked that click event so that it's no longer taking us to the Join page. Instead, we're now loading it into this new container, this new div that we've created in JavaScript. And once we click on the Join link, we can prove that it's pulling in that Join page by expanding this out and looking at the inner HTML. We can see the entire HTML for the Join page there. And we can see in our JavaScript file that we've done that in this page change function. So we have this click event for our transition links and we're grabbing the href from that link and storing that href or that location for the new page we're going to into this new URL variable. Which we're then passing into this pageChange function. And in the pageChange function, we're creating a container, which is basically a div, and then loading that new URL into this div. And then this function here runs whenever that load is complete. So right now, what we're doing, when it's finished loading is we're just logging the contents of that container. But what we need to do is we need to search inside that container for the content that we want to replace on the current page. So if we jump over to our index.html page, we can see that we have, inside our body, we have this div with an ID of page-home. And that page-home ID is used for a few things in our CSS. For example, if we open up Styles.CSS and scroll down until we see page-home hero-image. The hero-image is this section here with the large image and the text overlaying it, and it's this CSS that's setting the background image for that hero-image section. And so the background image for that hero section is determined by the page that it's on, and if we go to the Join page, we see we have a different hero-image background there. So again, those are based on this div that contains all of our page. So when we look inside page-home for this section with an id of hero-image, again in our CSS, that's what determines what that background image is. So we're not only pulling in new HTML, but we're also going to have to change the CSS in order to get that background image showing up properly. But first, let's just worry about the content itself. We wanna see this text changed out with the text that's on the Join page and then in the section below that, we wanna see this three column section down here swap out with whatever's on the Join page. And if we navigate to the Join page in our browser, we can see what those sections look like. So we can see different text here and then we have a different three column section below that. Now in a site like this, you're also likely to have a footer at the bottom of the page and, in most cases, a footer like that would not change either. So we would leave that alone and we would just load in these two sections. So let's go back to the Index page, and let's see how we're gonna do that. Now we've already pulled in the content that we need. If you remember in our main JS, we already talked about this, we've pulled it in using the container.load. So now we need to look into this container to find those areas of our content that we need to swap out, and to make that happen. And again, one of the sections we're swapping out will take the hero-image first of all, it's this section here that has an ID of hero-image. And we're gonna take the HTML of that container, right now we're looking at index.html and we're gonna swap that out. If we jump into our join.html page, we're gonna swap that out with the HTML that's inside the hero-image containment there. So instead, let me go ahead and double-click on both of these, so that they'll both open in their separate tabs. So instead of EssentiaLyfe Oils here for our h2, we should see after clicking on the button, Join EssentiaLyfe Today. So let's see if we can make that happen. We're gonna jump back into our JavaScript and here's our container load. We'll go ahead and leave that console log there for now. And what I wanna do is I wanna point to our hero-image container. So remember that hero-image container is inside a div with an id of hero-image. And then we're going to set its HTML and we can do that in jQuery by typing .html. And if we wanted to, we could put something here like h1, I'm gonna just put test content here. And then close our h1, and then a semicolon at the end of that statement. So let's just see if that works, first, and then we'll worry about pulling in the external content. So let's save our main.js file, and you'll notice I'm working in SITE04 now. If you're following along, then our starting point here is gonna be the content that's in SITE03, but all the changes we make in this lesson will be saved in SITE04. So we'll jump back into our browser and refresh the site04/index.html page, and then click on Join and there we go. We see that our content has been replaced with this h1 that says Test Content. Now obviously, that's not what we want, so now that we know that that works, let's replace this here with the html that's inside the hero-image of our container. So the way we would find that, let's get rid of this string here. The way we would find that in jQuery is we would look inside the container by pointing to the container and then doing a .find. So we'll do a container.find, and what I wanna find here is the content of the hero-image container. So we're gonna put quotation marks here and inside the quotation marks, we're gonna point to hero-image. Now keep in mind, that's not gonna work, cuz we don't wanna pull the entire hero-image div and put it inside the current hero-image div. Otherwise, if we go back to our HTML, we're gonna have a hero-image section immediately inside the hero-image section and that's not what we want. We don't want a section inside a section. Instead, we just want what's inside that hero-image to be placed inside this hero-image. So instead of just pointing to the hero-image ID as a whole, we're gonna look inside that hero-image. And the way we're gonna do that is we're gonna do a greater than sign here, and then > *. So what that's saying in CSS is we're gonna look at all of the content or all of the elements that are inside the preceding selector. So we're gonna take all the contents inside this container's hero-image section and we're gonna place it inside the current hero-image section, so let's see if that worked. Let's save that, jump back into our browser and refresh the page, and pay close attention to our text here, let's see if that changes. We're gonna click on Join and sure enough, it does. It now says Join EssentiaLyfe Today and then the text below it changed as well. I should probably also state that to the best of my knowledge, EssentiaLyfe is not really a company, it's just something I made up. So let's jump back into main.js. And we've got this working for our hero-image, now we just need to do the same thing for the section below. So if we go back to our index.html, here's our hero-image section and then just below that is the section called main-content. And that's the second section that we're gonna replace. So as you can imagine, it's gonna work very similar to the way we did this here. So I'm just gonna copy that, go to the next line and paste it, and instead of hero-image here, we're gonna point to main-content which is the ID of the next section we're going to replace. And then instead of container.find('#hero-image, we're gonna do container.find(main-content. And that should get us our main-content as well, so we'll save that, refresh our page once again. So now we see our three columns here at the bottom with just text in them, and when we click on Join, we see that those are now replaced with our three columns that have images in them. Now obviously, you don't have to have a three column setup on both pages, because it's replacing everything that's in that main-content section. So your two sections don't have to be built the same way. That just happens to be how it's working out in this case. So now that we've got the content being replaced properly, we need to take a look at how to get the background of this hero-image to change whenever we switch to the new page. And again, what it's gonna look like once we're done, if I click on Join now, you'll see our background does not change. But if we navigate to join.html, it will actually pull in the actual join.html page, we can see that the background image is different there. So we're gonna address that in the next lesson. Thank you for watching.

Back to the top