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.
Centering an image
From the course: JavaScript: Enhancing the DOM (2013)
Centering an image
So our images are loading, everything is resizing properly. Now it's time to center the images. to do that, I'm going to create a separate function, and it's going to go right down here, right before the closing of the self-executing function. So I'll call this function center image, and this function is going to expect an image to be passed to it. So, what I want to do here is start by creating a couple variables. I'll call this myDifX and that's going to be equal to the window interwidth. Minus the image that gets past, width, and divided by two. Once we have re-sized, the images they are going to be usually smaller or the same size as the window. So, we need to calculate the difference between the width of the image and the window. Divide that by two so that if it needs to be moved. It's going to be moved by half the distance. That's what places it in the center. So, we'll calculate the difference between the x position and the y position of the images. So, instead of when or with…
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)
-