Jan 29
I added a jQuery plugin called .
This plugin implements visual effect of adding something to cart (busket). Visually it’s similar to Microsoft Word post-save visual effect, when a gray rectangular of page moves down to the toolbar.
Example of usage:
<input type="button" value="Add to cart"
onclick="$.add2cart( 'product1_id', 'cart_img_id' )" />You can try it out at .
February 2nd, 2009 at 05:13
It’s ok to have a comment.
February 2nd, 2009 at 16:10
Hi!
This is a great plugin, simple and light. I’ve tested it and it works under firefox, but it’s almost invisible on IE7. Didn’t test under IE6.
Another (very small) bug (onfirefox) : the fist time you click on the source, the shadow div doesn’t start at the correct location but just under the source image. The second time you click, it’s correct.
I’ve look at the code, but haven’t still find where the bug come from. I’ll post here if I find.
Tx for your plugin !
February 2nd, 2009 at 16:17
Forgot the second bug: I’ve slower the move to correctly see where it start, and it start at the correct location !
And for the first bug I’ve found: it’s just the lightgray that IE7 don’t like: just replace with #999999 and it works !
background-color: #999999;
February 2nd, 2009 at 16:23
Thank you, Fab!
February 3rd, 2009 at 02:08
You’re welcome
Another small bug:
If your source element is in a div with overflow:hidden (and your target elsewhere out of this div), the shadow div will be hidden once out of the div. The fix is simple, you’ve to replace:
source.before(
by:
$(‘body’).prepend(
So the shadow is in the root …
February 17th, 2009 at 13:07
Fab, I’ve applied your suggestions and updated the plugin. Thank you!
February 25th, 2009 at 02:06
Really good plugin. Saw this type of effect (may even be the same effect) in a free ecommerce solution and liked it ever since.
Simple to implement and adds a bit extra to the site.
Many Thanks
May 23rd, 2009 at 18:23
Any idea how to remove the div from the target after the effect has completed. If it remains over a cart, all links to products in the cart are unavailable.
I tried shadow.remove() , that disables the animation.??
June 1st, 2009 at 22:47
I tried to slow down the animation by changing the value of duration from 300 to 600 but the animation flickers and is not smooth.. any ideas?
June 1st, 2009 at 23:27
Zeb, paste your changes here please (put it in pre+code tags).
June 30th, 2009 at 16:38
A quick note…
The code:
—–
if( !shadow ) {
alert(‘Cannot create the shadow div’);
}
—–
will never trigger because even if source is undefined, you are still setting shadow = “#_shadow”, which then makes it an object, and therefore defined. This of course allows the script to continue and thus error out on the shadow.width function, as since shadow is “something” but its not a valid element. Your best bet would be to check that source and target are both valid before continuing
July 23rd, 2009 at 18:51
Response to brent:
You can remove the shadow div after the animation is done by modifying the script as shown below:
.animate( { opacity: 0 }, 200, function(){ $(this).remove(); //removes shadow after animation
} );
I’ve added an anonymous function that runs after the animation and calls .remove() on the shadow div.
Note: I could only get this to work with the animation speed set directly (e.g. by using 200 instead of { duration: 200}), any ideas why?
I suggest adding this to the next version of add2cart.
Sincerely, Bjarne.
August 17th, 2009 at 19:18
Hi i’m trying out this feature and i’d like to call another function when animation finishes ?
Tried to use the “callback” =>
$.add2cart(‘img_src’,'img_dest’,functionToPlay())
but it doesn’t work ?
Any ideas about how to ?
Thx for the plugin
December 13th, 2009 at 18:22
Great plugin! works fine in Chrome and firefox but the location is off in IE 8. It’s taking the position of top left and not taking the image as a whole. Any ideas why?