Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
This project is working and looking great. But there's a slight problem that we need to take care of. If you resize this window for any reason and then I'm going to click on one of these, it looks great. But if I resize my window now, you can see that it doesn't look good because the overlay doesn't stretch to the whole width of the window. So we need to go ahead and fix that. I'm going to go enter my code and, right over here, I'm going to add a listener for another window event. So this time, the event that I want to look for is called resize and, of course, like before, I want to execute a function and pass it along false to make sure that it bubbles properly.
Once again, we're going to make sure that the overlay exists. And if it does, we need to adjust this. So, my overlay style, we're going to change the style attributes width and we're going to make that to the window inner width plus the pixel measurement. (SOUND) We're going to do a similar thing with the height. (SOUND) Of course, it's going to be inner height. (SOUND) And we also need to adjust the position of the top and left of the overlay. (SOUND) So, I'm going to save this. And I'll go back into my project.
I'll refresh. I'm going to make my window smaller again. And I'll pull up one of these images, resize my window. And the overlay looks really good but the image is not centered. So let me go back here and just execute the center image function and pass it along to large image. So now, I'm going to make my window smaller again and I'll refresh click on this and as I re-size the window, the image will be centred. One more thing that I want to clean up is when I remove the 'overlay' I want to make sure that the window is no longer listening for the events that I have just created.
So, I'll add a 'window, removeEventListener' here and pass it along the event that I want to remove. Which will be re-size, window, and false, because of the way the event bubbles, and do the same thing to get rid of the event that the text for scroll. This is just a clean-up function, it's going to work either way but, it's safer to do things properly. So I'll save, refresh, re-size the window, and try it out once again.
Everything's working well. Click on this, and it goes away. And now our project is finished. So hopefully you got a chance to practice a lot of the things that you learned in this course. Enhancing the DOM is all about understanding how the DOM nodes work, so you can access them, remove them, and create events around the nodes that you have in your DOM.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105315 Viewers
56 Video lessons · 117062 Viewers
71 Video lessons · 86267 Viewers
131 Video lessons · 41235 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.