Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Setting up our core files

From: JavaScript: Events

Video: Setting up our core files

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.

Setting up our core files

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.

And I'll put an Alt tag here, this is going to be my snowman. And there is a few other things that I want to add here. First of, I'm going to be dragging all of these I want to include the draggable attribute, going to set that to true for all the files. And the next thing I'm going to do is to set the style attributes for every one of the images in the HTML. This is not something I would normally do but in this document it makes a lot of sense because we're going to be using JavaScript to control the positioning.

And JavaScript is going to end up injecting these into your HTML any ways. And this is a great place of previewing where the images are going to go, and helping us lay them out. This will make sense in just a minute. So let me just go ahead and type it in. So the attribute that we need is the style attribute, and then we're going to pass it along some CSS. Just like we would normally do on this style.css file. So I'll do style, and then set the position of the object to absolute. What that will do is, allow me place any one of the elements at a specific X and Y position because none of the containers of these images are set to relative.

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.

If you don't know where they're going to go, then what you could do also is get rid of the positioning attributes, so just get rid of all this. Positioning stuff right here. And then layout the file manually. I can't do that with this because we don't have the JavaScript done. But if you just get rid of the left and top positioning here then all the elements will arrange sort of right on top of each other. And then you can just move them around and then copy the HTML for any one of those positions. So, although I never use in-line style sheets, in this project it's going to make a lot of sense.

The JavaScript you create eventually is going to inject this in-line code into your projects any ways. And it's really going to help you design the project if you keep this code in your HTML at the beginning.

Show transcript

This video is part of

Image for JavaScript: Events
JavaScript: Events

27 video lessons · 7017 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript: Events.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.