Start learning with our library of video tutorials taught by experts. Get started

HTML5 Projects: Engaging Ecommerce
Illustration by

Adding JavaScript events


From:

HTML5 Projects: Engaging Ecommerce

with Joseph Lowery

Video: Adding JavaScript events

In the previous lesson, we struggled arduously with the HTML for drag and drop. Okay, okay, there was only one attribute per div. But now we're ready for the main event, and that's bringing in the JavaScript events that will interact with our user's actions. The first thing I'm going to do is bring in some help. When drag and drop was first introduced, browser implementation was all over the map. One developer, Guillaume Bort, took it upon himself to level the playing field with his native drag-and-drop routines, which you can find on GitHub.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
HTML5 Projects: Engaging Ecommerce
37m 29s Intermediate Nov 06, 2012

Viewers: in countries Watching now:

The HTML5 Projects series combines HTML5, CSS3, and recent JavaScript API technologies to work—enhancing your web projects with interactivity and multimedia. This installment shows you how to build features that allow visitors to your online store to filter their selections interactively via sliders, drag items onto wish lists, and automatically save them locally. Author Joseph Lowery uses this scenario as an opportunity to introduce concepts such as HTML5 form elements with JavaScript enhancements, local content storage, and drag-and-drop.

Topics include:
  • Including range form elements
  • Modifying the display interactively
  • Establishing JavaScript functions
  • Dragging items to wish lists
  • Storing wish list items locally
  • Saving and retrieving list items
Subjects:
Web User Experience Ecommerce Web Design Projects
Software:
HTML JavaScript CSS
Author:
Joseph Lowery

Adding JavaScript events

In the previous lesson, we struggled arduously with the HTML for drag and drop. Okay, okay, there was only one attribute per div. But now we're ready for the main event, and that's bringing in the JavaScript events that will interact with our user's actions. The first thing I'm going to do is bring in some help. When drag and drop was first introduced, browser implementation was all over the map. One developer, Guillaume Bort, took it upon himself to level the playing field with his native drag-and-drop routines, which you can find on GitHub.

I often include his library because it really helps browser compatibility. So, lets head all over to our source code, and I'm going to drop in this script include. And this is located in the _scripts, and it's called jquery.ndd, for native drag and drop, .js. Let's set the type=text/javascript and then close off this tag.

Now, I'm going to link in another script that I've already placed in _scripts folder for this lesson. So, let's add in another script tag, and we'll set the src=_scripts/dragdrop.js. Again, I'll set my type=text/javascript and close the tag>. Now, let's take a moment to look at the two files that we included.

First, I'll take a real cursory look at jquery.ndd.js. As you look at the various functions here, you can see that basically what he's doing is making it easy for the drag and drop to work across a number of different browsers. The first issue that's addressed, starting on line 21, for WebKit browsers like Safari or Google Chr1ome. Next, he fixes the events so they work across the board, and so on. You can go through all of the various functions that you see here and really get a behind-the-scenes look of how everything works.

On the other hand, you can just use the library. Now, let's spend a little bit more time working with the custom code that's in dragdrop.js. Almost all the code that's located in this file is used for binding a specific drag-and-drop event to one or more page elements. It starts with the elements that we're dragging. The first code block identifies the painting class, which are all of our paintings, as the element that we are going to bind the dragstart event to.

Now, you'll notice also that as part of that dragstart, on line 3, data transfer is a set up. And what it's transferring is the ID of the element. Now, I also have tossed in some effects here so that the page will see more lively when you start to drag something. The headings will fade in fast. And there is a Hover state. And on hover, the images will fade out, and then when you let go of them, fade in. Next, we address the target area, which is in a div called favorites.

Now, if we take a look at the HTML page--and I'll scroll down to the side section, past the paintings-- we'll see the div on line 74. And that's where we have the heading of Favorites, and the big Drag Favorites section. Now, you'll also see in unordered list with the ID of faves. That's where the favorites will be listed. Let's had back to dragdrop.js. So, there are a number of events that are bound to the favorites ID.

First, there's the dragover event. When you drag the element over the target, favorites, the background color changes to a gray. Now, you'll also see, in three out of these four bindings, the code evt.preventDefault. This is a necessary call that needs to be made for drag and drop to work properly. Now, if you leave the background color as shown starting on line 16, the background color goes back to its original-- that purple color that you saw.

Now, although there is no functionality added to the dragenter event, you still need to have the preventDefault function applied for everything to work smoothly. Finally, there is the bind drop function. This is where we transfer the data that we previously got, the ID, and bring that in to what's going to become our list. The rest of the code, from line 25 on down to 31, basically builds up the list item.

And when it's done, it adds in a new LI tag with the ID and whatever's inside of that. After the item has been added to the list, we change the background color back to its purple and issue a final command, stop propagation, in order to close everything out. Okay, we've linked this code to our page. Let's go to index.htm, save those changes, and now return to the browser. Refresh the page. So, let me scroll down first, so we can see all of our paintings and our favorites drop zone there.

Let's say that I'm interested in patterns. So, I'll go over, click it up, drag it into the target area. We saw the background color changed there. You see the plus sign indicated on the icon itself. That's being handled by the operating system. I'll drop it, and there is patterns $200, the same price as listed on the main gallery section. Looking good. So, there's one favorite. Now, let's pick up arrows and bring that in.

Again, the background color changes, and when I drop it, the background color reverts, and I have arrows at 250 listed here. So, our drag and rop is really a beauty to behold, but right now its actions are only temporary. Watch what happens if I refresh the page. Poof! All of our favorites are gone, which kind of defeats the idea of favorites. So, in the next chapter, we'll integrate another HTML5 technology to make it all better.

There are currently no FAQs about HTML5 Projects: Engaging Ecommerce.

 
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.
Upgrade now


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 Upgrade now

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 HTML5 Projects: Engaging Ecommerce.

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

Notes cannot be added for locked videos.

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.