Masier
2006-Oct-18 04:33 UTC
Having problems with "position:fixed; bottom:0%;" and dropzone div''s
Hello, after searching through other posts I have not found this
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);
?>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Brian Peiris
2006-Oct-18 06:48 UTC
Re: Having problems with "position:fixed; bottom:0%;" and dropzone div''s
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
return (y >= this.offset[1] &&
y < this.offset[1] + element.offsetHeight &&
x >= this.offset[0] &&
x < this.offset[0] + element.offsetWidth);
},
On 10/18/06, Masier <knot777-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
>
> Hello, after searching through other posts I have not found this
> 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
Waterloo, Ontario, Canada
brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org
===========================
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Masier
2006-Oct-18 08:30 UTC
Re: Having problems with "position:fixed; bottom:0%;" and dropzone div''s
Thanks for that Brian. It works like a charm. I owe you a beer mate. 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 > return (y >= this.offset[1] && > y < this.offset[1] + element.offsetHeight && > x >= this.offset[0] && > x < this.offset[0] + element.offsetWidth); > }, > > On 10/18/06, Masier <knot777-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > > Hello, after searching through other posts I have not found this > > 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 > Waterloo, Ontario, Canada > brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org > mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org > ===========================> > ------=_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:knot777-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org">knot777-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org</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:brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org">brianpeiris-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org</a><br><a href="mailto:mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org"> > mbmpeiris-QFUY5ocGksJFJ04o6PK0Fg@public.gmane.org</a><br>===========================> > ------=_Part_4925_17165085.1161154092669----~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
spyridon.vasileiadis-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org
2006-Oct-18 09:14 UTC
Re: Having problems with "position:fixed; bottom:0%;" and dropzone div''s
i havent read through the whole post (no time :P ) but from the title i think http://dev.subimage.com/projects/substruct/ may fit your needs. It helped me learn a ton of stuff on eshops cart etc --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---