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.4 Changing the Hero Image

We have pulled in the content we need, but the hero image on the page hasn’t changed yet because it’s being pulled in with CSS. In this lesson, we will address this issue so that we will be able to see the correct image when the new content loads.

3.4 Changing the Hero Image

Hello, and welcome back. In our last lesson we've set up our page so that, when we click on the Join link, we see that our content switches out. The only thing that doesn't happen, that we're expecting to happen, is the background image for our hero section isn't switching out. If we actually navigate to our join.html page in our URL bar, we'll see what that background is supposed to look like. But right now it looks like this no matter which page we're on, so obviously we wanna switch that out. So we talked a little bit before about how this image is pulled in, we're actually pulling it in using CSS. If we go to our styles.css page, and scroll down a little bit until we see page-home and page-join, we see these two hero-image sections. This is where that background URL is pulled in. So in either case it's being pulled into the hero-image selector, but it depends on which page we're on. If we're inside the page-home div then it shows one background, if we're inside the page-join div then we're seeing another background. And when we're switching from one page to the next, the way we're doing it now with jQuery, when we click on the Join page, we're changing up the content, but we haven't changed anything regarding this page-home div, we haven't changed that name. If we go back to our index.html we can see that that's the outermost div inside the body of our HTML document, and in order to change the background of our hero-image here all we need to do is to change the id of this div here. So when we navigate from page-home to page-join we just need to change that id, and that should get us where we need to be. So everything that we finished up within the last lesson was saved in the site04 folder, so those are the files that we're starting with now. But all the changes we make in this lesson are gonna be saved in site, as we see up here at the top. So again, all we need to do is we need to change the id of this page whenever we click on the new page. So the way we're gonna do that is, when we pull in our new page, when we pull in the Join page, let me go ahead and open that up as well. When we open up this Join page, we wanna look through this page for this div and finding the id there. Now you'll notice that I'm using a pattern here, I'm using page- and then the name of the page. So what I'm gonna do is, I'm gonna look for the element that starts with an id-, excuse me, page-, and then we'll find that id, and save that id name, and replace the existing id with that one. So we're gonna jump into main.js, and remember, all of this is being done right now inside this container.load() method. We're replacing the HTML for our hero-image and for our main content, but again, we also wanna change the id of that containing div. So the first thing we wanna do is to find the id of that containing div. So I'm gonna create a variable here, called pageid, and we're going to look inside this new container. Remember, this container here is where we loaded all the new content. So we're gonna look inside this container, and find the id that we're looking for, so we're gonna do a .find(), and we're looking for an element that has a certain attribute that starts with a certain stream. So the way we do that is, if we're looking at an attribute, we put it inside square brackets, and this is all CSS syntax here. So we have the square brackets here, this means we're looking for an attribute, and we're looking for an attribute called id. So we're looking for the element that has an id that starts with page-. So the way we do starts with, in CSS, is we type in the caret symbol, which is Shift and then the number 6, and then =. So id^=, and then inside quotation marks we're gonna have page-. And as always, make sure that you are inner quotations marks here are different types of quotations marks than the outer ones, so if you have single quotes on the outside make sure you have double quotes on the inside, or your string will break. So again, what we're doing here is we're trying to find the element that has an id that starts with page-, and we're gonna grab that id and store it in this new variable. So once we've found that element we need to grab that element's id, and the way we do that, is we type .attr, for attribute, and then inside parentheses and quotation marks we simply type id. So we're gonna find the id of that element we just looked up, and we're gonna save that id name inside this pageid variable. And then, we're gonna find the element on the current page that meets the same criteria, that has an id that starts with page-, and that id on the current page is gonna be replaced with the id from the page we just pulled it from. So we can use this same selector here; I'm just gonna copy that, and on the next line, inside a jQuery selector, we're gonna paste it. And it looks like I put my quotes there twice, let's undo that and then paste it, there we go. So doing it this way, with container.find() we're gonna find the page id that's inside the new content that we just loaded from the join.html page. But here, just using a jQuery selector, we're gonna find the id that starts with page- on the current page, our existing page, which when we first start out is our index page. So what we're gonna do is we're gonna change that id on the existing page by saying .attr, just like we did before, and the first argument here is gonna be id. So if we just leave it as is it's going to retrieve the current id, but we don't wanna retrieve it, we wanna replace it. So if we wanna replace it, then we need to put another argument inside this attr() method. So we're gonna type comma space, and then the value we want to replace it with, which is stored now in this variable called pageid. And our hope is that, simply by replacing that id from the current page with the id from the new page, then our CSS will trigger that background image to change. So let's see if that worked. Let's save our work, and we'll jump over to our browser. Make sure we're in the right folder, site05, and then refresh the page. So now we see the flower background on the homepage, and hopefully, when we click on Join the background will change. Let's see, and sure enough, it does. So in order to show you what's going on here, I'm just gonna refresh the page, which will take us back to the original index page. Cuz we never actually switched pages, we just loaded now content into the current page. But if we refresh the page we see index.html, and if we right-click somewhere near the top, and do an Inspect, and look near the top, we see our div just inside the body has an id of page-home. Now, if we click on Join, we see that that changes, our div has an id of page-join instead of page-home, so that's what's happening there. All we're doing is we're swapping out that id, and then our CSS is doing the rest of the work for us. Which is kind of foreshadowing for what's gonna happen in the future, our CSS is gonna do all of our animation work for us. All we're gonna have to do is change some ids or class names in our HTML to trigger that. So thank you for watching, and we'll continue in the next lesson.

Back to the top