From the course: JavaScript: Enhancing the DOM (2013)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Creating and styling an overlay with JavaScript
From the course: JavaScript: Enhancing the DOM (2013)
Creating and styling an overlay with JavaScript
So, in this movie I want to show you how to create an overlay. We're going to use a lot of things that we already used in previous movies. So, first off, I'll remove this console lock command. And what I want to do is create a variable and call it myoverlay. And in here I want to create a new element. So, I'm going to use the Create Element method. And create a new div in our document. So, just so that it's easier to target, I want to make this overlay have an id of overlay. I can do that by just using the dot notation and pass an empty attribute. In this case the id that I want to change and then I want to add this to the current document so, I'll just add it to the body tag and use the Append Child method. And pass along my overlay so, what this'll do is once you click on an image its going to add this overlay to the end of the bodytag, so let's go ahead and go into our code. So, here we are in the artist page. And I'm going to scroll down and click on one of these items. It doesn't…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
What we'll build2m 16s
-
(Locked)
Adding a bubbling event listener4m 11s
-
(Locked)
Creating and styling an overlay with JavaScript4m 39s
-
(Locked)
Adding an image3m 48s
-
(Locked)
Resizing images in the DOM2m 59s
-
(Locked)
Centering an image2m 36s
-
(Locked)
Handling clicks1m 29s
-
(Locked)
Adjusting for scrolling1m 36s
-
Detecting and adjusting for a window resize2m 40s
-
(Locked)
-