Yes, you're right. The current SVN toggle() does use queues. If you
want to override its queue settings (which I've copied below), you'll
need to specify.
queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
I dropped the code in my browser, and I'm seeing the "jumping" you're
talking about. I'm not sure what your CSS is like, but I put
"border: 2px solid red;" around mfBannerDiv, and it made things clear.
After the fade out, the first image disappears, the div is resized
(triggers mouseout), and thus it comes back immediately.
There are two things at work here: mouseout/mouseover don't work as
you might originally suspect. For example, "mouseout" may fire
(depending on your browser) when you move from a div to *its
contained elements*. There was another thread recently on this. PPK
at quirksmode.org has some good content on this subject too.
I went back to your original code: what's missing to diagnose/
correct is your CSS.
The following works for me in Firefox (I had to supply my own images):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
Event.observe('mfBannerDiv', 'mouseover', function() {
new Effect.toggle('mfBannerColr');
});
Event.observe('mfBannerDiv', 'mouseout', function() {
new Effect.toggle('mfBannerColr');
});
});
</script>
<style type="text/css">
#mfBannerDiv {
width: 452px;
height: 377px;
}
#mfBannerDiv img {
position: absolute;
}
</style>
</head>
<body>
<div id="mfBannerDiv" style="border: 2px solid red">
<img id="mfBannerGray" src="images/Tobin_2006.png">
<img id="mfBannerColr" src="images/TJ_2006.png" style="display:none">
</div>
</body></html>
On Jun 7, 2007, at 11:22 AM, detlevv wrote:
>
> Thanks, Tom, for directing me to queues...
> Doesn't 'toggle' use queues anyway ? I thought, that I've seen
> something like that in the code.
>
> I've now build a similar scenery with slightly different behaviour:
> the grey image (top-most one) is hidden without any effect, thats all.
> I've tried to encapsulated that images with an extra 'div' as well as
> different queue positions and limits, w/o any difference.
>
> I think, that there possibly something little wrong with my code, but
> I can't see it...
>
> <div id="mfBannerDiv">
> <div id="mfBannerColr"><div><img src="color.jpg"></div></div>
> <div id="mfBannerGrey"><div><img src="grey.jpg"></div></div>
> </div>
>
> Event.observe(window, 'load', function() {
> Event.observe('mfBannerDiv', 'mouseover', function() {
> new Effect.Fade('mfBannerGrey', {queue: {position:'front',
> limit:2, scope:'banner'}}); });
> Event.observe('mfBannerDiv', 'mouseout', function() {
> new Effect.Appear('mfBannerGrey', {queue: {position:'end',
> limit:2, scope:'banner'}}); });
> });
>
> -------------------
> detlevv
>
>
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" 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/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
