- View Offline
- Understanding event registration and propagation
- Analyzing event properties
- Creating and removing DOM elements with events
- Removing an event
- Canceling and preventing default events
- Playing media events
- Handling media pauses
- Dragging and dropping
- Adding touch events
Skill Level Intermediate
Alright, so it's time to start preparing our document. And right now, we've got an images folder with a bunch of svg documents, and I've already created a few blank index.html, script.js, and style.css files. So let's get started with some code, I'm going to click on this index file, and I'll start with a plain html document. I'm going to name this snowman, and I'm going to call my CSS file by using the link tag and linking it to style.css.
And, I'm going to go over here right before the closing body tag and type in a script tag that links this to the script.js document. (NOISE) Right so our files are linked, really the rest of the page is just a bunch of image tags, but the image tags are built in a very specific way. So let me just go through one of them, And then we'll copy the rest from the code snippets.md file. So I'm going to use an image tag right here. And as the source of the image file I just want one of the images in my folder, so let's just pick images/body.svg.
These will all align to the body tag, if you need help with CSS layouts, make sure you check out with excellent course CSS page layouts with James Williamson. There's a chapter right here called Positioning Elements. This would be really good reading if you're not familiar with positioning absolute. Let's go back here we'll do position absolute and then we set up x and y coordinate here. Left, in this case, it would be 50 pixels. And top will be 120 pixels and I am also going to set the z index. The z index is the layering from top to bottom so think of these elements as a stack of cards anything with a z index higher than nothing will be on top of everything else.
So in here we were just going to set them all to 5 And this is pretty much what we do for any one of the other elements. So I don't want to sit here and type all these in. I already have a file here called codesnippets.md with all the images already placed at their right positions. So if I just grab all these and copy this to the clipboard and switch back to the index file, then I can just replace the one that I did right here. (SOUND) And just paste all of my images. So, you can see that they're all pretty much the same. Everything has an individual ID as well, so I just create an ID attribute, and make sure that everything has a unique name.
They're pretty much matching the name of the files as well. So, I've got all that done, let me go ahead and save this. And now before we do anything else, I'm going to go into my style.css, and set that up. This is going to be probably the easiest CSS you've ever seen. All we have to do is set the body tag, and set a background color. So I'm going to set my background color to #E4 And just clear out the normal margin that you see on any webpage, so margin and padding are going to be zero. And then set up a width, I'm going to be dealing with static sizes, so I'm going to use a static page width.
This is not going to be a responsive layout. And I'm also going to set a height. Normally I wouldn't set up a height, but in this kind of document you want to make sure that when you drag things there's going to be something behind. And since we're positioning all these elements absolutely, you're going to need the background to have a certain amount of height. So. It doesn't really matter what you put here. You can put in like 1000 or 600. Whatever will work for the layout that you're generating is fine right here. So, other than that all we need to do here is create a style for what happens when the element is draggable.
So I'll do draggable. And all I need to do here is modify the cursor. And offset the cursor to be the move attribute, so when you roll over these images, it's going to switch to a special cursor that's designed to work with moving images. So this is pretty much all the CSS you're going to do, all the other CSS is going to be in the index of that HTML document. So let's come over here and see if we can preview this in a browser. So you can see that everything is where it belongs. Right now we can't really move anything but everything is laid out nice and were we want it.
Now you are probably thinking I've spend a tone of time figuring out exactly the X and Y position of each one of these documents, but I am actually going to show you a cool short cut that you can use when you are doing a project like this. What I've done is gone to the finished version of this file. So, I've already got these laid out exactly how I want to, but if I wanted to change the way these were laid out all I have to do is look at the complete version of this project. And move these where ever I want em to lay em out. So, if I didn't like this layout and I want to spread things out a little bit or I wanted to just change the position of any one of these elements.
I can just go to the finished version of this project and then manually move things where I want them. And then, right click on any of these elements and select inspect element. And that will tell me the code for every one of those images and the new positions that I've placed them in. So, if we're right here at the very top, let's go ahead and hit this magnifying glass. And click on this one right here, so that's this element right here, since I have moved these with Java Script take a look at this positioning numbers right here.
If I move it again you'll see that they will change and now its just 344 px so whatever I do in the finished version of the code. I can just grab my HTML from here so I can right click on any of these and select Copy as HTML. And once I do that, then I can switch over to this version of the code, and just paste this into my layout. So if I paste this, you'll see that you get the new position for this element. So really, I didn't spend the time mathematically calculating where everything was going to go. I just simply lay them out as I wanted to, and then re-arrange them manually, and then copy all the html.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.