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. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.