The problem is that you have different scopes in all callbacks.
So the callback called when a "mouseover" event bubbles up, does not  
know about ausgefahren as defined in the callback of "dom:loaded" and  
so on.

You could use a "global" variable to save the state or use a custom  
object with the callbacks as methods and then fix the scope via bind()  
or bindAsEventListener() to your object.

It may be a bit overdone but i would go for something like:

<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>

<script type="text/javascript">

var MyMenu = Class.create({
   initialize : function(menu_element) {
     this.menu_element = $(menu_element); //make sure you have an  
extended element
     this.state = 0; // the state of the menu
     this.mouseover_callback =  
this.mouseOver.bindAsEventListener(this); //callbacks
     this.mouseout_callback = this.mouseOut.bindAsEventListener(this);
     this.menu_element.observe('mouseover', this.mouseover_callback);
     this.menu_element.observe('mouseout', this.mouseout_callback);
     this.queue = Effect.Queues.get(this.menu_element.identify() + '- 
scope'); //create a queue with a unique name
   },

   mouseOver : function() {
         this.queue.each(function(ev) { ev.cancel(); });
      new Effect.Move(this.menu_element, {
         x:0,
         y:50,
         duration: 0.2,
         mode: "absolute",
         queue : {scope : this.menu_element.identify() + '-scope',  
limit : 1},
         afterFinish : function() { // using an effect callback to  
make sure state is changes _after_ the last frame was renderd
          this.state = 1;
         }.bind(this)
       });
   },
   mouseOut : function() {
       this.queue.each(function(ev) { ev.cancel(); });

          new Effect.Move(this.menu_element, {
         x:-200,
         y:50,
         duration: 0.2,
         mode: "absolute",
         queue : {scope :  this.menu_element.identify() + '-scope',  
limit : 1},
         afterFinish : function() {
           this.state = 0;
         }.bind(this)
       });
     }
});

var menu;
document.observe("dom:loaded", function(ev) {
   menu = new MyMenu('aeusseresmenue');
});
</script>

I hooked in Jim's suggestions to stop running effects in the queue  
with their cancel() method, this prevents the issues with fast mouse  
movement.
Obviously this code works without saving the current state, i just  
left that in because i don't know if you want to use the menu's state  
somewhere else.


Am 16.02.2009 um 22:26 schrieb Mario:

>
> Thanks, you are right, it works.
>
> However, I tried the solution which saves the stat but i wasn't able
> to solve the problem, I made it even worse...
>
>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <script src="./module/prototype.js" type="text/javascript"></script>
> <script src="./module/scriptaculous.js" type="text/javascript"></
> script>
>
> <script type="text/javascript">
> document.observe("dom:loaded", function(ev)
>       {
>       ausgefahren = 0;
>
>       $('aeusseresmenue').observe('mouseover', function(ev)
>               {
>               if (ausgefahren == 0)
>                       {
>                       new Effect.Move(this, {x:0, y:50, duration:0.2, mode:
> "absolute",});
>                       ausgefahren = 1
>                       }
>               });
>    $('aeusseresmenue').observe('mouseout', function(ev)
>               {
>               if (ausgefahren == 1)
>                       {
>                       new Effect.Move(this,{x:-200, y:50, duration:0.2, mode:
> "absolute", });
>                       ausgefahren = 0;
>                       }
>        });
>    });
> </script>
>
> <link rel="stylesheet" href="./stylesheets/reset.css" type="text/ 
> css" /
>>
> </head>
>
> <body>
> <div id="aeusseresmenue" style="background: #0c0; width: 230px;
> height: 400px; position: absolute; left: -200px; top: 50px;">
> <div id="inneresmenue" style="background: #000; width: 200px; height:
> 400px;">
> Hallo Welt
> </div>
> </div>
> </body>
> </html>
>
>
> Can you see the wrong part?
> Mario
>
>
>
>
>
> On 15 Feb., 12:09, timbob <timm.glo...@gmail.com> wrote:
>> The problem is that you are triggering a mousemove event _every_ time
>> you move the mouse within the <div>, and every single time you create
>> a Move effect.
>> So when you leave the <div> there is a mouseout event and also the
>> mousemove event from your last mouse movement.
>>
>> The flickering you see is the interference of the two created move
>> effects. Since script.aculo.us renders all ongoing effects "in
>> parallel", unless you specify otherwise.
>>
>> As a workaround you could use an extra Event.Queue for your menu, and
>> limit the effects in the queue to only one at a time.
>> This is a bit dirty, but it works sort of. Of course you can mess
>> things up if you move your mouse very fast (depending on the effects
>> duration) in and out of the <div>.
>>
>> It maybe better to save the state of the "menue" somewhere and check
>> that before creating a new effect.
>>
>> <html>
>>   <head>
>>     <script type="text/javascript" src="prototype.js"></script>
>>     <script type="text/javascript" src="effects.js"></script>
>>     <script type="text/javascript">
>>       document.observe("dom:loaded", function(ev) {
>>         $('aeusseresmenue').observe('mouseover', function(ev) {
>>           new Effect.Move(this, {x:0, y:50, duration:0.2, mode:
>> "absolute", queue : {scope : 'myscope', limit : 1}});
>>         });
>>         $('aeusseresmenue').observe('mouseout', function(ev) {
>>           new Effect.Move(this,{x:-200, y:50, duration:0.2, mode:
>> "absolute", queue : {scope : 'myscope', limit : 1}});
>>         });
>>       });
>>     </script>
>>   </head>
>>   <body>
>>     <div id="aeusseresmenue" style="background: #0c0; width: 230px;
>> height: 400px; position: absolute; left: -200px; top: 50px;">
>>       <div id="inneresmenue" style="background: #000; width: 200px;
>> height: 400px;">
>>         Hallo Welt
>>       </div>
>>     </div>
>>   </body>
>> </html>
>>
>> On 13 Feb., 17:20, Mario <sevenartwo...@googlemail.com> wrote:
>>
>>> Hi there,
>>
>>> I'd like to move a <div> container which is mostly hidden left of  
>>> the
>>> screen (width is 230px, left is -200px so you can only see the right
>>> border) into the screen and back by using the event handlers
>>> onmouseover and onmouseout.
>>
>>> It works already but not perfect: By leaving the <div> box the
>>> container shortly flickers in the middle again for some mili  
>>> seconds.
>>> Can anybody help me?
>>
>>> <body>
>>
>>> <div id="aeusseresmenue" style="background: #0c0; width: 230px;
>>> height: 400px; position: absolute; left: -200px; top: 50px;"
>>> onmousemove='new Effect.Move(this,{x:0, y:50, duration:0.2, mode:
>>> "absolute"});' onmouseout='new Effect.Move(this,{x:-200, y:50,
>>> duration:0.2, mode: "absolute"});'>
>>> <div id="inneresmenue" style="background: #000; width: 200px;  
>>> height:
>>> 400px;">
>>> Hallo Welt
>>> </div>
>>> </div>
>>
>>> </body>
>>
>>> Thanks, Mario.
>>
>>> PS: I already tried to use onmouseover instead of onmousemove, but
>>> then i had the problem of recalling the move in all the time.
> >


--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Reply via email to