Having problems with "position:fixed; bottom:0%;" and dropzone div's
Masier
problem.
What I am trying to do is to create a simple shopping cart. What I had
hoped was to have a div that is positioned to the bottom of the browser
window (the cart). Therefore customers can drag items into the cart as
they browse the catalogue. Nothing too tough, or so I thought. However
in the below example I can drag items from 1 - 6 into the cart without
a problem but when I scroll down to 7 - 12 and try to drop stuff into
the cart it doesn't pick it up.
What am I missing?? Any solutions or pointers in the right direction
would be greatly appreciated. I am using the current 1.6.4 release.
PS I should also mention this example is for fire fox and the like.
Example.php
____________________________________________________________________________
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Ajax Workshop 3: Shopping Cart using Script.aculo.us</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<style media="screen" type="text/css">
body {
font-family:"Trebuchet MS";
font-size:12px;
}
#body {
position:absolute;
width:99%;
height:99%;
background-color:#ffffff;
overflow:auto;
}
#cart {
background-color:#FFFF66;
border:dashed gray 1px;
height:100px;
width:500px;
padding:5px;
margin-top:10px;
overflow: auto;
position: fixed;
bottom:0%;
}
#products {
background-color:#FFF;
border:dashed gray 1px;
height:100px;
width:500px;
padding:5px;
}
#productstoscroll {
position:absolute;
top:1200px;
background-color:#FFF;
border:dashed gray 1px;
height:100px;
width:500px;
padding:5px;
}
#spaceforcart {
position:absolute;
top:1310px;
height:100px;
width:1px;
padding:1px;
visibility: hidden;
}
.box {
background-color:#CCFF33;
border:solid gray 1px;
margin:10px;
padding:4px;
width:50px;
height:50px;
float:left;
cursor:pointer;
position: static;
}
#loading {
display:none;
float:right;
}
#clearCart {
color:blue;
text-decoration:underline;
cursor:pointer;
float:right;
}
#clearCart:hover {
background-color:#CCFFCC;
color:#000099;
}
</style>
<script language="javascript" type="text/javascript">
function addProduct(element, dropon, event) {
sendData(element.id);
}
function sendData (prod) {
var url = 'cart.php';
var rand = Math.random(9999);
var pars = 'product_id=' + prod + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
}
function clearCart () {
var url = 'cart.php';
var rand = Math.random(9999);
var pars = 'clear=true&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
}
function clearProduct (id) {
var url = 'cart.php';
var rand = Math.random(9999);
var pars = 'clearProduct=true&id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
}
function showResponse (originalRequest) {
$('loading').style.display = "none";
$('clearCart').style.display = "block";
$('cart').innerHTML = originalRequest.responseText;
}
function showLoad () {
$('clearCart').style.display = "none";
$('loading').style.display = "block";
}
</script>
</head>
<div id="hypv-feedback" style="position:absolute; border:1px solid
#f90; background-color:#ccc; top:0px; left:0px; padding:2px;
width:75px; height:75px; display:none;font-size:110%;">Click Me</div>
<script type="text/javascript">
Position.Window = {
//extended prototypes position to return the scrolled window
deltas
getDeltas: function() {
var deltaX = window.pageXOffset
|| document.documentElement.scrollLeft
|| document.body.scrollLeft
|| 0;
var deltaY = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
return [deltaX, deltaY];
},
//extended prototypes position to return working window's size,
copied this code from the tooltip.js library based on prototype.
size: function() {
var winWidth, winHeight, d=document;
if (typeof window.innerWidth!='undefined') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else {
if (d.documentElement && typeof
d.documentElement.clientWidth!='undefined' &&
d.documentElement.clientWidth!=0) {
winWidth = d.documentElement.clientWidth
winHeight = d.documentElement.clientHeight
} else {
if (d.body && typeof
d.body.clientWidth!='undefined') {
winWidth = d.body.clientWidth
winHeight = d.body.clientHeight
}
}
}
return [winWidth, winHeight];
}
}
</script>
<body>
<div id=body>
<div id="cart">
<div style="float:left; font-weight:bold">Shopping Cart</div>
</div>
<h1>Ajax Workshop 3: Shopping Cart using <a
href="http://script.aculo.us">Script.aculo.us</a> </h1>
<h2>Drag the products into the shopping cart</h2>
<div id="products">
<div style="float:left; font-weight:bold">Products</div>
<div id="clearCart" onclick="clearCart();">Clear Cart</div>
<div id="loading"><img src="indicator.gif" alt="loading..." /></div>
<br style="clear:both" />
<div class="box" id="product_1">1</div>
<div class="box" id="product_2">2</div>
<div class="box" id="product_3">3</div>
<div class="box" id="product_4">4</div>
<div class="box" id="product_5">5</div>
<div class="box" id="product_6">6</div>
</div>
<div id="productstoscroll">
<div style="float:left; font-weight:bold">Products</div>
<div id="clearCart" onclick="clearCart();">Clear Cart</div>
<div id="loading"><img src="indicator.gif" alt="loading..." /></div>
<br style="clear:both" />
<div class="box" id="product_7">7</div>
<div class="box" id="product_8">8</div>
<div class="box" id="product_9">9</div>
<div class="box" id="product_10">10</div>
<div class="box" id="product_11">11</div>
<div class="box" id="product_12">12</div>
</div>
<div id="spaceforcart">
<div style="float:left; font-weight:bold">Shopping Cart</div>
</div>
<script type="text/javascript">
var products = document.getElementsByClassName('box');
for (var i = 0; i < products.length; i++) {
new Draggable(products[i].id, {ghosting:true, revert:true})
}
Droppables.add('cart', {onDrop:addProduct})
</script>
</div>
</body>
</html>
___________________________________________________________________________
cart.php
____________________________________________________________________________
<?php
session_start();
function stringForJavascript($in_string) {
print "$in_string <br />";
$str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
$str = ereg_replace('"', '\\"', $str);
Return $str;
}
if (isset($_GET['clearProduct'])) {
$_SESSION['cart'][$_GET['id']]--;
if ($_SESSION['cart'][$_GET['id']] == 0) {
unset($_SESSION['cart'][$_GET['id']]);
}
foreach ($_SESSION['cart'] as $key => $value) {
print "$key = $value <span style=\"color:blue;
text-decoration:underline; cursor:pointer\"
onclick=\"clearProduct('$key');\">DELETE</span><br />";
}
sleep(1);
die;
}
if (isset($_GET['clear'])) {
unset($_SESSION['cart']);
sleep(1);
die;
}
$prodid = $_GET['product_id'];
$_SESSION['cart'][$prodid] = 1 + $_SESSION['cart'][$prodid];
foreach ($_SESSION['cart'] as $key => $value) {
print "$key = $value <span style=\"color:blue;
text-decoration:underline; cursor:pointer\"
onclick=\"clearProduct('$key');\">DELETE</span><br />";
}
sleep(1);
?>
Brian Peiris
I added two lines to the 'within' method of the Position class in prototype.js that seems to fix your problem
It's not a permanent fix, just a clue to what's going wrong. I'm sure it will break other cases
within: function(element, x, y) {
if (this.includeScrollOffsets)
return this.withinIncludingScrolloffsets (element, x, y);
this.xcomp = x;
this.ycomp = y;
this.offset = this.cumulativeOffset(element);
this.offset[0]+=this.realOffset(element)[0];// ADDED THESE
this.offset[1]+=this.realOffset (element)[1];// TWO LINES
return (y >= this.offset[1] &&
y < this.offset[1] + element.offsetHeight &&
x >= this.offset[0] &&
x < this.offset [0] + element.offsetWidth);
},
============================
Brian Peiris
Waterloo, Ontario, Canada
brian...@gmail.com
mbmp...@uwaterloo.ca
============================
Masier
Cheers
Jason
Brian Peiris wrote:
> It's not that the cart isn't pickup up the drop, it's just offset so the
> drop location is actually an invisible area above the cart.
> I added two lines to the 'within' method of the Position class in
> prototype.js that seems to fix your problem
> It's not a permanent fix, just a clue to what's going wrong. I'm sure it
> will break other cases
>
> within: function(element, x, y) {
> if (this.includeScrollOffsets)
> return this.withinIncludingScrolloffsets(element, x, y);
> this.xcomp = x;
> this.ycomp = y;
> this.offset = this.cumulativeOffset(element);
> this.offset[0]+=this.realOffset(element)[0];// ADDED THESE
> this.offset[1]+=this.realOffset(element)[1];// TWO LINES
> ------=_Part_4925_17165085.1161154092669
> Content-Type: text/html; charset=ISO-8859-1
> X-Google-AttachSize: 21525
>
> It's not that the cart isn't pickup up the drop, it's just offset so the drop location is actually an invisible area above the cart.<br>I added two lines to the 'within' method of the Position class in prototype.js that seems to fix your problem
> <br>It's not a permanent fix, just a clue to what's going wrong. I'm sure it will break other cases<br><br> within: function(element, x, y) {<br> if (this.includeScrollOffsets)<br> return this.withinIncludingScrolloffsets
> (element, x, y);<br> this.xcomp = x;<br> this.ycomp = y;<br> this.offset = this.cumulativeOffset(element);<br> this.offset[0]+=this.realOffset(element)[0];// ADDED THESE<br> this.offset[1]+=this.realOffset
> (element)[1];// TWO LINES<br> return (y >= this.offset[1] &&<br> y < this.offset[1] + element.offsetHeight &&<br> x >= this.offset[0] &&<br> x < this.offset
> [0] + element.offsetWidth);<br> },<br><br><div><span class="gmail_quote">On 10/18/06, <b class="gmail_sendername">Masier</b> <<a href="mailto:kno...@gmail.com">kno...@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
> <br>Hello, after searching through other posts I have not found this<br>problem.<br><br>What I am trying to do is to create a simple shopping cart. What I had<br>hoped was to have a div that is positioned to the bottom of the browser
> <br>window (the cart). Therefore customers can drag items into the cart as<br>they browse the catalogue. Nothing too tough, or so I thought. However<br>in the below example I can drag items from 1 - 6 into the cart without
> <br>a problem but when I scroll down to 7 - 12 and try to drop stuff into<br>the cart it doesn't pick it up.<br><br>What am I missing?? Any solutions or pointers in the right direction<br>would be greatly appreciated. I am using the current
> 1.6.4 release.<br><br>PS I should also mention this example is for fire fox and the like.<br><br><br>Example.php<br><br>____________________________________________________________________________<br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
> 1.0 Transitional//EN"<br>"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><br><html xmlns="<a href="http://www.w3.org/1999/xhtml">
> http://www.w3.org/1999/xhtml</a>"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"<br>/><br><title>Ajax Workshop 3: Shopping Cart using <a href="http://Script.aculo.us">
> Script.aculo.us</a></title><br><script src="prototype.js" type="text/javascript"></script><br><script src="scriptaculous.js" type="text/javascript"></script>
> <br><style media="screen" type="text/css"><br>body {<br> font-family:"Trebuchet MS";<br> font-size:12px;<br>}<br>#body {<br>position:absolute;<br> width:99%;<br> height:99%;
> <br> background-color:#ffffff;<br> overflow:auto;<br> }<br><br>#cart {<br> background-color:#FFFF66;<br> border:dashed gray 1px;<br> height:100px;<br> width:500px;<br> padding:5px;<br> margin-top:10px;
> <br> overflow: auto;<br> position: fixed;<br> bottom:0%;<br>}<br>#products {<br> background-color:#FFF;<br> border:dashed gray 1px;<br> height:100px;<br> width:500px;<br> padding:5px;
> <br>}<br>#productstoscroll {<br> position:absolute;<br> top:1200px;<br> background-color:#FFF;<br> border:dashed gray 1px;<br> height:100px;<br> width:500px;<br> padding:5px;
> <br>}<br>#spaceforcart {<br> position:absolute;<br> top:1310px;<br> height:100px;<br> width:1px;<br> padding:1px;<br> visibility: hidden;<br>}<br>.box {<br> background-color:#CCFF33;
> <br> border:solid gray 1px;<br> margin:10px;<br> padding:4px;<br> width:50px;<br> height:50px;<br> float:left;<br> cursor:pointer;<br> position: static;<br><br>}<br>
> #loading {<br> display:none;<br> float:right;<br>}<br>#clearCart {<br> color:blue;<br> text-decoration:underline;<br> cursor:pointer;<br> float:right;<br>}<br>#clearCart:hover {<br>
> background-color:#CCFFCC;<br> color:#000099;<br>}<br></style><br><script language="javascript" type="text/javascript"><br>function addProduct(element, dropon, event) {<br> sendData(
> <a href="http://element.id">element.id</a>);<br>}<br>function sendData (prod) {<br> var url = 'cart.php';<br> var rand = Math.random(9999);<br> var pars = 'product_id=' + prod + '&rand=' + rand;
> <br> var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,<br>onLoading: showLoad, onComplete: showResponse} );<br>}<br>function clearCart () {<br> var url = 'cart.php';<br> var rand =
> Math.random(9999);<br> var pars = 'clear=true&rand=' + rand;<br> var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,<br>onLoading: showLoad, onComplete: showResponse} );<br>}<br>function clearProduct (id) {
> <br> var url = 'cart.php';<br> var rand = Math.random(9999);<br> var pars = 'clearProduct=true&id=' + id + '&rand=' + rand;<br> var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
> <br>onLoading: showLoad, onComplete: showResponse} );<br>}<br>function showResponse (originalRequest) {<br> $('loading').style.display = "none";<br> $('clearCart').style.display = "block";
> <br> $('cart').innerHTML = originalRequest.responseText;<br>}<br>function showLoad () {<br> $('clearCart').style.display = "none";<br> $('loading').style.display = "block";<br>}<br>
> </script><br></head><br><div id="hypv-feedback" style="position:absolute; border:1px solid<br>#f90; background-color:#ccc; top:0px; left:0px; padding:2px;<br>width:75px; height:75px; display:none;font-size:110%;">Click Me</div>
> <br><script type="text/javascript"><br> Position.Window = {<br> //extended prototypes position to return the scrolled window<br>deltas<br> getDeltas: function() {<br> var deltaX =
> window.pageXOffset<br> || document.documentElement.scrollLeft<br> || document.body.scrollLeft<br> || 0;<br> var deltaY = window.pageYOffset<br> || document.documentElement.scrollTop
> <br> || document.body.scrollTop<br> || 0;<br> return [deltaX, deltaY];<br> },<br> //extended prototypes position to return working window's size,<br>copied this code from the
> tooltip.js library based on prototype.<br> size: function() {<br> var winWidth, winHeight, d=document;<br> if (typeof window.innerWidth!='undefined') {<br> winWidth = window.innerWidth
> ;<br> winHeight = window.innerHeight;<br> } else {<br> if (d.documentElement && typeof<br>d.documentElement.clientWidth!='undefined' &&<br>d.documentElement.clientWidth!=0
> ) {<br> winWidth = d.documentElement.clientWidth<br> winHeight = d.documentElement.clientHeight<br> } else {<br> if (d.body && typeof<br>d.body.clientWidth!='undefined'
> ) {<br> winWidth = d.body.clientWidth<br> winHeight = d.body.clientHeight<br> }<br> }<br> }<br> return [winWidth, winHeight];
> <br> }<br> }<br><br></script><br><body><br> <div id=body><br> <div id="cart"><br> <div style="float:left; font-weight:bold">Shopping Cart</div>
> <br> </div><br> <h1>Ajax Workshop 3: Shopping Cart using <a<br>href="<a href="http://script.aculo.us">http://script.aculo.us</a>"><a href="http://Script.aculo.us">Script.aculo.us</a>
> </a> </h1><br> <h2>Drag the products into the shopping cart</h2><br> <div id="products"><br> <div style="float:left; font-weight:bold">Products</div>
> <br> <div id="clearCart" onclick="clearCart();">Clear Cart</div><br> <div id="loading"><img src="indicator.gif" alt="loading..." /></div>
> <br> <br style="clear:both" /><br> <div class="box" id="product_1">1</div><br> <div class="box" id="product_2">2</div>
> <br> <div class="box" id="product_3">3</div><br> <div class="box" id="product_4">4</div><br> <div class="box" id="product_5">5</div>
> <br> <div class="box" id="product_6">6</div><br> </div><br> <div id="productstoscroll"><br> <div style="float:left; font-weight:bold">Products</div>
> <br> <div id="clearCart" onclick="clearCart();">Clear Cart</div><br> <div id="loading"><img src="indicator.gif" alt="loading..." /></div>
> <br> <br style="clear:both" /><br> <div class="box" id="product_7">7</div><br> <div class="box" id="product_8">8</div>
> <br> <div class="box" id="product_9">9</div><br> <div class="box" id="product_10">10</div><br> <div class="box" id="product_11">11</div>
> <br> <div class="box" id="product_12">12</div><br> </div><br><br> <div id="spaceforcart"><br> <div style="float:left; font-weight:bold">Shopping Cart</div>
> <br> </div><br><script type="text/javascript"><br> var products = document.getElementsByClassName('box');<br> for (var i = 0; i < products.length; i++) {<br> new Draggable(products[i].id, {ghosting:true, revert:true})
> <br> }<br> Droppables.add('cart', {onDrop:addProduct})<br></script><br></div><br></body><br></html><br><br><br>___________________________________________________________________________
> <br><br><br>cart.php<br><br>____________________________________________________________________________<br><br><?php<br>session_start();<br>function stringForJavascript($in_string) {<br> print "$in_string <br />";
> <br> $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);<br> $str = ereg_replace('"', '\\"', $str);<br> Return $str;<br>}<br> if (isset($_GET['clearProduct'])) {<br> $_SESSION['cart'][$_GET['id']]--;
> <br> if ($_SESSION['cart'][$_GET['id']] == 0) {<br> unset($_SESSION['cart'][$_GET['id']]);<br> }<br> foreach ($_SESSION['cart'] as $key => $value) {<br> print "$key = $value <span style=\"color:blue;
> <br>text-decoration:underline; cursor:pointer\"<br>onclick=\"clearProduct('$key');\">DELETE</span><br />";<br> }<br> sleep(1);<br> die;<br>}<br>if (isset($_GET['clear'])) {
> <br> unset($_SESSION['cart']);<br> sleep(1);<br> die;<br>}<br>$prodid = $_GET['product_id'];<br>$_SESSION['cart'][$prodid] = 1 + $_SESSION['cart'][$prodid];<br>foreach ($_SESSION['cart'] as $key => $value) {
> <br> print "$key = $value <span style=\"color:blue;<br>text-decoration:underline; cursor:pointer\"<br>onclick=\"clearProduct('$key');\">DELETE</span><br />";<br>}<br>
> sleep(1);<br>?><br><br><br><br></blockquote></div><br><br clear="all"><br>-- <br>============================<br>Brian Peiris<br>Waterloo, Ontario, Canada<br><a href="mailto:brian...@gmail.com">brian...@gmail.com</a><br><a href="mailto:mbmp...@uwaterloo.ca">
> mbmp...@uwaterloo.ca</a><br>============================
>
> ------=_Part_4925_17165085.1161154092669--
spyridon.v...@googlemail.com
think http://dev.subimage.com/projects/substruct/ may fit your needs.
It helped me learn a ton of stuff on eshops cart etc