Hi Isaac,
> Hope to soon become pro-javascriptor, senior scriptaculous african
> Rep, will spread this good deed also by helping others in the forum.
> Again humble apologies for rude way of problem presentation.
Hope I can help you !!!
On 18 fév, 13:23, javamaasai <ikhag...@gmail.com> wrote:
> Dear David and All,
>
> Still a newbie in the group, humble apologies again! Thank you for
> taking time to respond to my issue, i'm also looking inside the class
> to see if there's any thing i can change to make it work. Taking
> javascript programming to new frontier in Africa creating, free
> javascript tutorials for students here. was just pressured with time
> since i'm free and soon to go back to work schedule.
>
> Hope to soon become pro-javascriptor, senior scriptaculous african
> Rep, will spread this good deed also by helping others in the forum.
> Again humble apologies for rude way of problem presentation.
> Thanks
>
> Isaac
>
> On Feb 18, 2:22 pm, david <david.brill...@gmail.com> wrote:
>
> > Hi Isaac,
>
> > As I say in your previous post, modify the for loop and you will have
> > some gain !
> > For the problem of the overflowed DIV, I think it's an error in
> > Scriptaculous, because it did not take the scrolled offset to parent.
> > So you could look at this inside the class.
>
> > if some guys around could confirm, I personnally thing it is a bug ??
>
> > I will be very curious, why drop inside a scrollable div, this is not
> > standard in design ??
>
> > And please don't repost, people take on there personnal time to help
> > others, and the way you present the problem, it seems that you want us
> > to do your (paid?) job !!
>
> > --
> > david
>
> > On 17 fév, 12:20, david <david.brill...@gmail.com> wrote:
>
> > > Hi javamaasai,
>
> > > try this portion of code to create droppable (instead of the FOR
> > > loop):
>
> > > $R(1,4).each(function(i){
> > > Droppables.add('droppable_demo'+i, {
> > > accept: 'draggable',
> > > hoverclass: 'hover',
> > > onDrop: function(){
> > > alert(i);
> > > $('droppable_demo'+i).highlight();
> > > }
> > > });
>
> > > });
>
> > > At this moment, you will see that there is not only the droppable 1
> > > that accept drops; but droppable 1 & 2 !
> > > This an an evolution ??
>
> > > But for the other problem you could still not drop on droppable 3 &
> > > 4 !!
>
> > > I didn't really know what it is, but you could see at the function
> > > cumulativeScrollOffset().
> > > I think it's because the droppable don't know that the element have
> > > scrolled and always take first element??
>
> > > btw, to drop on a scrollable zone is, to my opinion, not a good
> > > practice ! But you should have a good reason !
>
> > > --
> > > david
>
> > > On 16 fév, 15:09, javamaasai <ikhag...@gmail.com> wrote:
>
> > > > Hey All,
>
> > > > I'm creating a small online traditional Shop, where tourists can buy
> > > > African traditional goods. These include things like beads, Warrior
> > > > spears clothing e.t.c My web application has pictures of african items
> > > > draggables in an overflowed div and droppables pictures of visit
> > > > locations where one.
>
> > > > Issue is when multiple droppables are put in overflowed div and
> > > > scrolled, they kind of virtually remain fixed, i.e. droppable3 scrolls
> > > > to position of droppable1 but on dropping on droppable3 the active
> > > > drop area is for droppable1!
>
> > > > Here is small sample code test code:
>
> > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> > > > "http://www.w3.org/TR/xhtml1/DTD/...";>
> > > > <html xmlns="http://www.w3.org/1999/xhtml";>
> > > > <head>
> > > > <script src="javascript/prototype.js" type="text/javascript">
> > > > <script src="javascript/scriptaculous.js" type="text/
> > > > javascript">
> > > > </script>
> > > > </head>
> > > > <body>
> > > > <style type="text/css">
>
> > > > div#droppable_container {
> > > > margin-bottom: 30px;
> > > > height: 300px;
> > > > width: 500px;
> > > > background: black;
> > > > padding: 10px;
> > > > }
>
> > > > div#droppable_demo {
> > > > width: 160px;
> > > > height: 120px;
> > > > font-size: 15px;
> > > > background: #ffffff;
> > > > border: 5px solid #ccc;
> > > > text-align: center;
> > > > float: right;
> > > > }
>
> > > > .droppable_demo {
> > > > width: 100px;
> > > > height: 100px;
> > > > font-size: 15px;
> > > > background: #ffffff;
> > > > border: 5px solid #ccc;
> > > > text-align: center;
> > > > float: left;
> > > > margin: 5px;
> > > > }
>
> > > > #draggable_demo {
> > > > background: yellowgreen;
> > > > margin: 5px;
> > > > border: 3px solid green;
> > > > width: 100px;
> > > > height: 100px;
> > > > cursor: move;
> > > > font-size: 15px;
> > > > float: left;
> > > > }
>
> > > > .spaceHolder {
> > > > background: orange;
> > > > margin: 5px;
> > > > border: 3px solid orangered;
> > > > width: 100px;
> > > > height: 100px;
> > > > font-size: 15px;
> > > > float: left;
> > > > }
>
> > > > div#droppable_demo.hover {
> > > > border: 5px dashed orange;
> > > > background: #efefef;
> > > > }
> > > > .droppable_demo.hover {
> > > > border: 5px dashed orange;
> > > > background: #efefef;
> > > > }
>
> > > > #dragContainer {
> > > > background: yellow;
> > > > border: 5px solid blue;
> > > > float: left;
> > > > width: 60%;
> > > > height: 120px;
> > > > overflow: auto; /*This is where the weirdness
> > > > happens*/
> > > > }
> > > > #dropContainer {
> > > > background: blue;
> > > > border: 5px solid red;
> > > > float: left;
> > > > width: 60%;
> > > > height: 120px;
> > > > overflow: auto; /*This is where the weirdness
> > > > happens*/
> > > > }
>
> > > > h3 {
> > > > color: black;
> > > > float: left;
> > > > }
> > > > </style>
> > > > <div id="droppable_container">
> > > > <div id="dragContainer">
> > > > <div class="draggable" id="draggable_demo">
> > > > DRAG ME!!!
> > > > </div>
> > > > <!-- space holders added to create overflow -->
> > > > <div class="spaceHolder">
> > > > Space Holder
> > > > </div>
> > > > <div class="spaceHolder">
> > > > Space Holder
> > > > </div>
> > > > <div class="spaceHolder">
> > > > Space Holder
> > > > </div>
> > > > </div>
> > > > <div id="dropContainer">
> > > > <div class="droppable_demo" id="droppable_demo1">
> > > > Drop here1!
> > > > </div>
> > > > <!-- space holders added to create overflow -->
> > > > <div class="droppable_demo" id="droppable_demo2">
> > > > Drop here2!
> > > > </div>
> > > > <div class="droppable_demo" id="droppable_demo3">
> > > > Drop here3!
> > > > </div>
> > > > <div class="droppable_demo" id="droppable_demo4">
> > > > Drop here4!
> > > > </div>
> > > > </div>
> > > > </div>
>
> > > > <h3>Draggables in yellow container with blue border,
> > > > droppables in blue containter with red border. Drag green box to Drop
> > > > here 1, it will change bourder on hover. Then scroll the droppables in
> > > > blue until you can see half-botttom of Drop here 1 & Drop here 2 and
> > > > the last two Drop here 3 & 4.</h3>
> > > > <script type="text/javascript">
> > > > new Draggable('draggable_demo', {
> > > > revert: true,
> > > > ghosting: true // this is needed to avoid the
> > > > craziness of the overflowed div's scroll bars
> > > > });
>
> > > > for (var i = 1; i <= 4; i++) {
> > > > Droppables.add('droppable_demo'+i, {
> > > > accept: 'draggable',
> > > > hoverclass: 'hover',
> > > > onDrop: function(){
> > > >
>
> ...
>
> plus de détails »
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
