Putting it together: Flowers in the cart
Video: Putting it together: Flowers in the cartNow 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.
Viewers: in countries Watching now:
- What is jQuery?
- Installing jQuery
- Performing multiple operations with chaining
- Using classes
- Adding, modifying, and removing content dynamically
- Triggering a change with event binding
- Creating a dynamic contact form
- Building a slideshow gallery
- Creating simple jQuery animations
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.
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.
There are currently no FAQs about jQuery for Web Designers.