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.
