Hi Mario, it's because you observe the "aeusseresmenue" element id on mouseover and mouseout. and when mouseover the element, it's move to show, that works great :))
But when it move, as move is very quick (it's not that thing to modify), the mouse stay in place and go on the "inneresmenue" element id. ==> the browser as no other choice to launch the mouseout on he "aeusseresmenue" element id and next, the mouseover on the "inneresmenue" element id. So effect loop indefinitelly between the two states from one element to another and the result is a hawfull flickering . My advice: 1- replace the moouseout observer to the "inneresmenue" element id but other problem come out :(( 2- complexify you code to handle every possible mouse position/states 3- use the event extension from http://livepipe.net/core (go to the extension tab), and look at mousenter & mouseleave, this is what you want. And a global remark: don't think that an effect will be launch when all other are ended, if you move your mouse quickly, you could launch mouseover and mouseout concurrently ==> you should cancel() all effect before starting a new one ! -- david On 16 fév, 22:26, Mario <[email protected]> wrote: > 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 <[email protected]> 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 <[email protected]> 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 [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
