Posts Tagged ‘Add to cart’

jQuery add to cart (Drop to cart)

Posted: September 4, 2012 in Jquery
Tags: ,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script language="javascript">
$(document).ready(function() {
var out = 0;
$("#arrow").click(function(){
if(out==0)
{
$("#inner").animate({marginRight: "0px"}, 500 );
out=1;
}
else
{
$("#inner").animate({marginRight: "-150px"}, 500 );
out=0;
}
});

$(".myLinks").click(function() {
var imageId = $(this).attr('ref');
var sourceX         = $("#" + imageId).offset().left;
var sourceY         = $("#" + imageId).offset().top;
var destX         = $("#inner").offset().left;
var destY         = $("#inner").offset().top;
var gotoX         = destX - sourceX;
var gotoY         = destY - sourceY;
var lastWidth     = $("#" + imageId).width() / 3;
var lastHeight    = $("#" + imageId).height() / 3;

$("#" + imageId)
.clone()
.insertAfter("#" + imageId)
.css({'position' : 'absolute'})
.animate({opacity: 0.4}, 100 )
.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: lastWidth, height: lastHeight}, 1500, function() {
$("#inner").animate({marginRight: "0px"}, 500 );
$('#inner').append('<p>'+imageId+' Added.</p>');
});
});

});
</script>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vibha Jadwani</title>
</head><body>
<table width="600" border="1">
<tr>
<? for($i=1;$i<=10;$i++){
if(($i%3)==1) echo '<tr>';
?>
<td>
<img id="myImage<?=$i?>" src="images/<?=$i?>.png" />
<br /><a ref="myImage<?=$i?>" href="#">Add To Cart</a>
</td>
<?  if(($i%3)==0) echo '</tr>';
} ?>
</tr>
</table>

<div style="cursor: pointer; position: fixed;right: 0;top: 75px;z-index: 2; border:2px solid black;">
<div style="width: 150px; background-color:#63BEDA; float: right; margin-right:-150px;" id="inner">
Product List:
</div>
<div style="width: 100px; background-color:#279000; float: right; cursor: pointer; color:#FFF; font-size:16px; padding:20px;" id="arrow">Shopping<br />Cart</div>
</div>

</body>
</html>