Hi david, thank you for your help. Your code works exactly as I wanted. I also noticed that using Effect.BlindUp and Effect.BlindDown to mouseover/mouseout quickly caused the loss of the height of the element and agree that using Effect.Morph is clearly a better solution for creating this effect. I don't think I would have been able to figure out this problem without your help so THANK YOU VERY MUCH!
On Wed, Jan 13, 2010 at 11:13 AM, david <david.brill...@gmail.com> wrote: > Hi Paul, > > sorry, I made a mistake, in your case, it return the Element and not a > scriptaculous Effect Object. > > I take your code and modify it :(( > Why, Because I think it's more flexible to use the Morph Effect > instead of those packaged Effect (it's my personnal opinion). > So go to pastie, and see the change I made: http://pastie.org/776764 > If some explaination is needed, just write it back on this thread, I > will try to follow it. My first reason is when moving in and out the > mouse quickly on the element will lost the real height of thge element > and Effects where lost ... > > So, quickly, I use the Morph Effect and animate the Height property of > the peekaboo to 50px and set it back to 0px for the ""blindDown"". > > -- > david > > > On 12 jan, 20:31, Paul Kim <kimba...@gmail.com> wrote: > > Hi David, thank you for your response and what you explained is exactly > what > > I'm trying to do. I have tried your code sample, but I get an error from > the > > Firebug console: effectInExecution.cancel is not a function. Here is the > > code that I have used:http://pastie.org/775288. It seems that > > effectInExecution=$('peekaboo').blindUp({ duration: 0.3 }); does not > > reference the Scriptaculous Effect object, which is what is needed to > call > > the cancel() method. However, I don't know how to reference the Effect > > object using the effectInExecution variable. I've tried: > > if(effectInExecution) effectInExecution*.effect*.cancel(); but it returns > an > > 'undefined', not the Effect object. Thanks for your time and I hope I can > > find a solution to this problem. > > > > On Tue, Jan 12, 2010 at 10:01 AM, david <david.brill...@gmail.com> > wrote: > > > hi kimbaudi, > > > > > This is a common mistake with animation. Let me explain. > > > When you mouseover element, you'll start animation. If you mouseout, > > > after animation is finished, no problem, mouseout animation will be > > > executed. > > > But now if you repeatedlly move mouse over/out/over/out, if you did > > > not manage global animations, you'll have 2 blinddown and 2 blindup > > > executing concurrently. > > > In your code exemple, you'll set the queue parameter so each animation > > > is stack and play one after the other ... but this is not what you > > > want ?? > > > And to lmimit execution code, you set the limit parameter, which > > > prevent having more tahn 1 animation in the queue. But that's not like > > > that it should be handle. > > > > > What you should do is: > > > > > <script type="text/javascript"> > > > document.observe("dom:loaded", function() { > > > var effectInExecution=null; > > > $('observearea').observe('mouseover', function() { > > > if(effectInExecution) effectInExecution.cancel(); > > > effectInExecution=$('peekaboo').blindDown({ duration: > > > 0.3 }); > > > } > > > $('observearea').observe('mouseout', function() { > > > if(effectInExecution) effectInExecution.cancel(); > > > effectInExecution=$('peekaboo').blindUp({ duration: 0.3 }); > > > } > > > }); > > > </script> > > > > > In fact, you just save the scriptaculous object and cancel it if > > > another animation should execute. > > > Is that what your trying to do ?? > > > > > -- > > > david > > > > > On 9 jan, 23:05, kimbaudi <kimba...@gmail.com> wrote: > > > > Hi, I have a hidden block element absolutely positioned to the bottom > > > > right of my webpage. I am trying to display this block element when I > > > > mouseover that area and hide this block element when I mouseout from > > > > that area using Effects.BlindUp and Effects.BlindDown. At first > > > > glance, my webpage seems to work okay. However, if I repeatedly > > > > mouseover/mouseout of the area quickly, the block element becomes > > > > visible once I mouseout of that area even though the block element > > > > should be hidden. Can anybody tell me what is wrong with my code? Can > > > > anybody point me to a website or share some example code that would > > > > achieve the results that I am trying to pull? Thanks. I would have > > > > provided the sample code on pastie.org, but the site is down. Here > is > > > > my sample code: > > > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > > > > <html xmlns="http://www.w3.org/1999/xhtml";> > > > > <head> > > > > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> > > > > <title>Blind Test</title> > > > > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ > > > > libs/prototype/1.6.1.0/prototype.js"></script> > > > > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ > > > > libs/scriptaculous/1.8.3/scriptaculous.js"></script> > > > > <script type="text/javascript"> > > > > document.observe("dom:loaded", function() { > > > > $('observearea').observe('mouseover', function() { > > > > if ($('peekaboo').visible()) { > > > > $('peekaboo').blindUp({ duration: 0.3, queue: > { > > > position: 'end', > > > > scope: 'modalbtnscope', limit: 1 } }); > > > > } > > > > else { > > > > $('peekaboo').blindDown({ duration: 0.3, > queue: { > > > position: 'end', > > > > scope: 'modalbtnscope', limit: 1 } }); > > > > } > > > > }); > > > > $('observearea').observe('mouseout', function() { > > > > if ($('peekaboo').visible()) { > > > > $('peekaboo').blindUp({ duration: 0.3, queue: > { > > > position: 'end', > > > > scope: 'modalbtnscope', limit: 1 } }); > > > > } > > > > else { > > > > $('peekaboo').blindDown({ duration: 0.3, > queue: { > > > position: 'end', > > > > scope: 'modalbtnscope', limit: 1 } }); > > > > } > > > > });}); > > > > > > </script> > > > > <style type="text/css"> > > > > body {margin:0; padding:0;} > > > > #peekaboo { > > > > position:absolute; > > > > bottom:0px; > > > > right:10px; > > > > z-index:9999; > > > > width:100px; > > > > height:20px; > > > > background:pink; > > > > text-align:center;} > > > > > > #observearea { > > > > position:absolute; > > > > bottom:0px; > > > > right:10px; > > > > z-index:9999; > > > > width:100px; > > > > height:20px;} > > > > > > </style> > > > > </head> > > > > <body> > > > > <div id="peekaboo" style="display:none;"><div>Peek-A-Boo</div></div> > > > > <div id="observearea"></div> > > > > </body> > > > > </html> > > > > > -- > > > 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-scriptacul...@googlegroups.com. > > > To unsubscribe from this group, send email to > > > prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@googlegroups.com> > <prototype-scriptaculous%2bunsubscr...@googlegroups.com<prototype-scriptaculous%252bunsubscr...@googlegroups.com> > > > > > . > > > For more options, visit this group at > > >http://groups.google.com/group/prototype-scriptaculous?hl=en. > > -- > 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-scriptacul...@googlegroups.com. > To unsubscribe from this group, send email to > prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@googlegroups.com> > . > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > > > >--
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-scriptacul...@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.
