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

Putting it together: Flowers in the cart

From: jQuery for Web Designers

Video: Putting it together: Flowers in the cart

Now we're going to start working on a little project that's going to put together everything we've learned about jQuery so far including animation, and it's going to culminate in a challenge at the end of the chapter. So here we are on what I'm calling an Order Flowers page. And we have a little shopping cart area over here. So what we're going to work on is making each of these flowers react when clicked, specifically that they should animate over into the cart from wherever they start. Up into this area. So the trick here is that I don't just want to send this image over here like this.

Putting it together: Flowers in the cart

Now we're going to start working on a little project that's going to put together everything we've learned about jQuery so far including animation, and it's going to culminate in a challenge at the end of the chapter. So here we are on what I'm calling an Order Flowers page. And we have a little shopping cart area over here. So what we're going to work on is making each of these flowers react when clicked, specifically that they should animate over into the cart from wherever they start. Up into this area. So the trick here is that I don't just want to send this image over here like this.

I want to leave this and send a ghost of it over like that, just like what happens when I drag. So let's take a look at how to do that. So I'm starting over here in my file. Let's jump down to the JavaScript. So right now I have my leftover animation method from before. And this will animate the first image that I find. That will work, but not for our purposes here. We want to make a copy of this, and then animate the copy. So, going to get rid of this. And the first thing that we're going to do is make that copy. So let's call it ghost. And what we're going to do is clone it, using the clone method.

And then, we're going to append the clone, so it ends up in the document. So we're going to use the append To function. Which will take a thing and then append it to somewhere else. In this case I'm going to append it right to the same link that it was copied from. So let's append it to link like this. I'm going save this and switch back over. Reload and click. And there we go, there's our ghost. So it's positioned in kind of a funny way but we do have another element that we can now animate. And let's give it a try.

So we're breaking this up across a couple of lines, just to keep things a little sensible. In fact, I'll add a comment. Add a copy to the document, copy of the image. Now we're going to animate it. So we'll use the animate method on our ghost. But then we need to know where to put it. So we can see that the location is right here, so let's start out by just sending it over to some hard coded pixels. That will be easy. Oh, wait a minute, I'm going to try and animate its left and top properties, but we don't know if the CSS is right. Well, actually, if we scroll back up to the top of the document.

I do have this class that I've provided for you. That will set absolute positioning and make sure that it appears on top of everything else. So we could manipulate the CSS using jQuery, but as we know it's nicer to use a class. So the first thing that we are going to do is to add the class to that ghost. So let's add the class right here. We'll just chain it right on there. Comment this out. We'll make sure that everything is copacetic so far. Save that. Switch over and reload. There we go. So the positioning of this is much nicer. I've added a little offset to that CSS.

You can see that there's something different, instead of just putting it right on top of the old image. But you can see that we have an extra copy which we'll then be able to move. Okay, so now that we've done that, we can start animating the left. So, let's move it over to say 750 pixels or so. And we'll change the top. Actually, let's just start with this. We'll just move the left. Okay. I'll reload. And zippity doodah, over it goes. Now the problem with this is that we've animated just the left property, so if I try this one, whoa boy.

Look at that. And never mind these. They're just all over the place. So, we want all of them to go up to this location. So clearly, we need to make this a little smarter. So we're going to need to animate the left and the top. But it's going to change depending on which thing we've clicked. I'll just put something in here to start us out. So, how do we do this? jQuery has a method called offset, which will give you the coordinates in an xy grid of any element that's on the page. So, what we're going to need to do is figure out the x y coordinates of the original item. And the target item, figure out the difference between them and then use that difference for each of these elements to animate it to the right place.

So I'm going to reload and now to see how this offset business works, let's inspect this element. Okay, going to use cart target. That's the id that we're going to shoot things at. So in the console, I'm going to select that by its id. And I'm going to call the offset method on it, and we'll see what we get back. Okay. It returns an object with a top and a left. Great, we can use that. So switching back over here, this is the trick. I'm going to collect a few more pieces. So first I'm going to collect the coordinates of my original image, that would be this. Using the offset method.

So I grab that first. Then, I'm going to select my target, using that cart target id and then, I'm going to get the coordinates of that target using the method offset. Okay. Save that. And switch back over to my browser. Going to close the console. So the properties that we're animating are top and left, so what's going to happen is I'm taking the left of this which is going to be let's say for this one it'd be about 200 or as the left because it starts from the left edge for the target is going to be a lot greater.

So what I need, this is my end point and I need to subtract from it the start point. So that means that my left is going to be the left of my target, with the left of my original image subtracted from it. Now, let's try that, just by itself. Go back over here and reload. So if I try this one, looks good. So the left is animating correctly on all of these. And of course it's still not quite right on these. It's matching the left coordinate, but we haven't figured out the top yet.

But the principle still applies. So. Reload it, back of here, we do the same thing for the top. Those will be the two coordinates we had, top and left. Refresh again, and just like that. Works on all of these. Now there's one more thing we could probably do here. It's a little fast right now for my taste. So I'm going to add another argument to the enemy method. Let's make it take a second and a half and see how that looks. Save it. Switch back over. Reload.

That's not bad at all. Now of course, this is leaving these images over here and perhaps there's more things we can do, but this is a good start. And we'll enhance it further in the next movie.

Show transcript

This video is part of

Image for jQuery for Web Designers
jQuery for Web Designers

37 video lessons · 12807 viewers

Joe Chellman
Author

 
Expand all | Collapse all
  1. 2m 17s
    1. Welcome
      1m 4s
    2. What you should know
      37s
    3. Using the exercise files
      36s
  2. 12m 0s
    1. jQuery is a JavaScript library?
      1m 15s
    2. When to use jQuery
      2m 51s
    3. Alternatives to jQuery
      1m 25s
    4. Which version of jQuery to use
      1m 50s
    5. How to install jQuery
      3m 21s
    6. Reference materials
      1m 18s
  3. 19m 19s
    1. Getting ready
      2m 26s
    2. Selecting elements to use
      3m 54s
    3. Performing multiple operations on the same line with chaining
      2m 30s
    4. Using classes to find what you're looking for
      3m 52s
    5. Adding, modifying, and removing content dynamically
      4m 3s
    6. Challenge: Form feedback
      1m 12s
    7. Solution: Form feedback
      1m 22s
  4. 18m 28s
    1. Triggering a change based on activity with event binding
      4m 37s
    2. Reading and changing values
      4m 17s
    3. Working with HTML attributes
      4m 55s
    4. Challenge: Dynamic contact form
      1m 27s
    5. Solution: Dynamic contact form
      3m 12s
  5. 16m 42s
    1. Using the Colorbox plugin to build a slideshow gallery
      4m 22s
    2. Implementing Colorbox on your site
      2m 46s
    3. Changing Colorbox options
      5m 53s
    4. Challenge: Convert to a slideshow
      1m 6s
    5. Solution: Convert to a slideshow
      2m 35s
  6. 28m 37s
    1. Using jQuery or CSS to animate elements
      2m 24s
    2. Creating simple jQuery animations
      4m 35s
    3. Animating numeric properties with animate()
      4m 56s
    4. Understanding animation easing
      4m 4s
    5. Putting it together: Flowers in the cart
      6m 4s
    6. Callbacks: What to do when the animation ends
      3m 27s
    7. Challenge: Improve the animation
      1m 3s
    8. Solution: Improve the animation
      2m 4s
  7. 4m 45s
    1. More fun plugins
      2m 38s
    2. What's next: More jQuery
      50s
    3. What's next: More JavaScript
      1m 17s

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 jQuery for Web Designers.

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 preferences from 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.

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.