Rails spinoffs - Feb 2006 - Scriptaculous: Newbie question - Effect.fade

Hi there,

Is it possible to do an effect.fade without removing the hidden document 
from the flow when in becomes invisible?

I have a line of images (initially all invisible)

[] [] [] [] []

And a list of links

- link 1
- link 2
- link 3
- link 4
- link 5

And what I want to happen is to have the images appear on link mouseover 
and disappear on mouseout but for the images to maintain their positions 
on the page. So, for instance, mousing over link 3 would have image 3 
appear thus:

      []     

And then over link 4:

         []  

And then over link 1:

[]

You get the picture! Is this possible?

Cheers.

Mike

Hey Mike,

maybe... this is a CSS question, and if I''m right, you can use several 
options:

either define every div inside another div with a certain width / height 
that does not go away (or use table cells - the old way ;-)).

<div style="width: 150px; float: left">

   <img class="pic1" src="pic1.jpg"/>

</div>


<div style="width: 150px; float: left">

   <img class="pic2" src="pic2.jpg"/>

</div>

... like that and it should work.
Also you can position every image absolute (CSS: "position:
absolute;")
so it is independent from the others. Or (not tried yet), the 
visibility-style instead of the display-style.

If you need more in-depth-information just tell me, and I''ll give you 
the grande tour ;-).


greetings,
benni.
-SDG-


Mike Thirlwell (CBJ Digital Ltd) wrote:
> Hi there,
> 
> Is it possible to do an effect.fade without removing the hidden document 
> from the flow when in becomes invisible?
> 
> I have a line of images (initially all invisible)
> 
> [] [] [] [] []
> 
> And a list of links
> 
> - link 1
> - link 2
> - link 3
> - link 4
> - link 5
> 
> And what I want to happen is to have the images appear on link mouseover 
> and disappear on mouseout but for the images to maintain their positions 
> on the page. So, for instance, mousing over link 3 would have image 3 
> appear thus:
> 
>      []    
> And then over link 4:
> 
>         [] 
> And then over link 1:
> 
> []
> 
> You get the picture! Is this possible?
> 
> Cheers.
> 
> Mike
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

You could do something like:

new Effect.Fade(element, { to: 0.1, afterFinish: function () {
Element.setOpacity(element, 0) });

That way it''ll fade until it''s almost gone, then disappear
without
actually dropping the element off the page.

Greg
> -----Original Message-----
> From:
rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-
> bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of
Mike Thirlwell (CBJ
Digital
> Ltd)
> Sent: Friday, February 03, 2006 8:58 AM
> To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> Subject: [Rails-spinoffs] Scriptaculous: Newbie question - Effect.fade
> 
> Hi there,
> 
> Is it possible to do an effect.fade without removing the hidden
document
> from the flow when in becomes invisible?
> 
> I have a line of images (initially all invisible)
> 
> [] [] [] [] []
> 
> And a list of links
> 
> - link 1
> - link 2
> - link 3
> - link 4
> - link 5
> 
> And what I want to happen is to have the images appear on link
mouseover
> and disappear on mouseout but for the images to maintain their
positions
> on the page. So, for instance, mousing over link 3 would have image 3
> appear thus:
> 
>       []
> 
> And then over link 4:
> 
>          []
> 
> And then over link 1:
> 
> []
> 
> You get the picture! Is this possible?
> 
> Cheers.
> 
> Mike
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs