I am creating fly to basket on Online Shopping "Add To Cart", For flying to basket i am using one jQuery. Below mentioning...
<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 ) {
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 ) {
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
<a href="#" class="addProduct">
<asp:ImageButton ID="ibtnAddToCart" runat="server" OnClick="ibtnAddToCart_Click"
ImageUrl="~/images/add-to-cart.gif" /></a>
I have onclick event
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..