Click here to Skip to main content
15,884,176 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am creating fly to basket on Online Shopping "Add To Cart", For flying to basket i am using one jQuery. Below mentioning...
JavaScript
<script type="text/javascript">
$(document).ready( function(){
	$('.addProduct').each(function(){
		var img = $("#ctl00_ContentPlaceHolder1_imgProduct");
		$(this).click(function(){
			flyToElement($(img), $('#ctl00_lbtnMyCart'));
		    return false;
		});

	});
	$('.removeProduct').each(function(){
		var img = $(this).closest('li').find('img:first');
		$(this).click(function(){
			flyFromElement($(img), $('#basket'));
			return false;
		});
	});
});

function flyToElement(flyer, flyingTo, callBack /*callback is optional*/) {
	var $func = $(this);

	var divider = 3;

	var flyerClone = $(flyer).clone();
	$(flyerClone).css({
		position: 'absolute',
		top: $(flyer).offset().top + "px",
		left: $(flyer).offset().left + "px",
		opacity: 1,
		'z-index': 1000
	});
	$('body').append($(flyerClone));

	var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
	var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;

	$(flyerClone).animate({
		opacity: 0.4,
		left: gotoX,
		top: gotoY,
		width: $(flyer).width()/divider,
		height: $(flyer).height()/divider
	}, 700,
		function () {
			$(flyingTo).fadeOut('fast', function () {
				$(flyingTo).fadeIn('fast', function () {
					$(flyerClone).fadeOut('fast', function () {
						$(flyerClone).remove();
						if( callBack != null ) {
							callBack.apply($func);
						}
					});
				});
			});
		});
}

function flyFromElement(flyer, flyingTo, callBack /*callback is optional*/) {
	var $func = $(this);

	var divider = 3;

	var beginAtX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
	var beginAtY = $(flyingTo).offset().top + ($(flyingTo).width() / 2) - ($(flyer).height()/divider)/2;

	var gotoX = $(flyer).offset().left;
	var gotoY = $(flyer).offset().top;

	var flyerClone = $(flyer).clone();

	$(flyerClone).css({
		position: 'absolute',
		top: beginAtY + "px",
		left: beginAtX + "px",
		opacity: 0.4,
		'z-index': 1000,
		width:$(flyer).width()/divider,
		height:$(flyer).height()/divider
	});
	$('body').append($(flyerClone));

	$(flyerClone).animate({
		opacity: 1,
		left: gotoX,
		top: gotoY,
		width: $(flyer).width(),
		height: $(flyer).height()
	}, 700,
		function () {
			$(flyerClone).remove();
			$(flyer).fadeOut('fast', function () {
				$(flyer).fadeIn('fast', function () {
					if (callBack != null) {
						callBack.apply($func);
					}
				});
			});
		});
}
		</script>


My Add to Cart div is
ASP.NET
<a href="#" class="addProduct">
    <asp:ImageButton ID="ibtnAddToCart" runat="server" OnClick="ibtnAddToCart_Click"
        ImageUrl="~/images/add-to-cart.gif"  /></a>


I have onclick event
C#
protected void ibtnAddToCart_Click(object sender, ImageClickEventArgs e)
{
     this.addCart();
}


Flying to basket is working, But Event is not firing , If any have solution for this situation..
Please help me..
Posted
v3
Comments
Please add one comment in my answer. We will talk there.
And I don't get you what exactly is the requirement. Please add one comment in my answer box explaining about it in details.

You need to return true in order to fire the code behind function.
So, the below click events should return true, instead of false.

Please try and let me know.
JavaScript
$(document).ready( function(){
	$('.addProduct').each(function(){
		var img = $("#ctl00_ContentPlaceHolder1_imgProduct");
		$(this).click(function(){
			flyToElement($(img), $('#ctl00_lbtnMyCart'));
		    return true;
		});
 
	});
	$('.removeProduct').each(function(){
		var img = $(this).closest('li').find('img:first');
		$(this).click(function(){
			flyFromElement($(img), $('#basket'));
	            return true;
		});
	});
});
 
Share this answer
 
Comments
Ankur\m/ 29-Apr-13 9:06am    
[copied from answer]
If we are putting return true. It will work. But at same time once again adding cart with same product/ quantity drop down index changing. Its not working..If you have any solution please help me....
Thanks @Ankur\m/ for notifying me. I will reply to OP.
I find One solution for fly to basket with jQuery and ASP.net

I used above jQuery. But return as true. Then @ Click event
C#
protected void ibtnAddToCart_Click(object sender, ImageClickEventArgs e)
{
  
}


I used thread.sleep(700);after this.addCart() function. Now its working fine for fly to basket animation.

Still i am facing one problem. i have one quantity loading drop down list, When ever this quantity drop down list changing and Click on add to cart. My fly to basket not working. If any one have any solution to this problem. Please help me...
 
Share this answer
 
XML
I got Final Solution....Now fly to Basket is working fine at all conditions. I applied trigger to drop down list control[
<asp:postbacktrigger controlid="ddlQty" xmlns:asp="#unknown" />
] and Thread.sleep(700) after inserting to add to cart....Thanks to Mr.Tadit Dash
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900