Hi, I''m kinda new in script.aculo.us and I''ve been seraching for quite some time now for a way to manage the Effects engine to do 2 things, without any luck: 1. I want a div to fade out after 3 seconds, and appearing again with changed content (different image and text). This should create a cycle of about 5 changing div''s, which will repeat constantly, creating a fade-in fade-out slideshow. 2. I want all my site''s pages to fade in when loaded, and fade out when exited, creating a nice flow within the site, regardless of the current page''s content. If enyone could please show me a piece of code to do that, that would be great! Thanks at advance, Elad. --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On Mar 14, 2007, at 8:13 PM, Elad wrote:> 1. I want a div to fade out after 3 seconds, and appearing again with > changed content (different image and text). This should create a cycle > of about 5 changing div''s, which will repeat constantly, creating a > fade-in fade-out slideshow.You could chain them via the afterFinish parameter <div id="foo"> Foo </div> <div id="bar" style="display: none"> Bar </div> <script type="text/javascript" charset="utf-8"> new Effect.Fade(''foo'', {afterFinish: function (obj) { new Effect.Appear(''bar'') }}) </script> See the docs at the bottom of http://wiki.script.aculo.us/scriptaculous/show/CoreEffects> 2. I want all my site''s pages to fade in when loaded, and fade out > when exited, creating a nice flow within the site, regardless of the > current page''s content.Wrap the content in a DIV with display set to "none" and attach the appear effect to the onload event: window.onload = function () { new Effect.Appear(''main'', {duration: 2}); } I like very much that effect, I do that in my website as well: http:// www.hashref.com. -- fxn --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thanks, this really does help me a lot, but still it''s not exactly
what I wanted -
1. I need a pause between each fadein and fadeout. something like 3
seconds.
2. I need 4 div''s, and in this way, the code gets really ugly -
new Effect.Fade(''menu_block_container1'', {duration: 5.0,
afterFinish: function (obj) {
new Effect.Appear(''menu_block_container2'', {duration: 1.0,
afterFinish: function (obj) {
new Effect.Fade(''menu_block_container2'', {duration: 5.0,
afterFinish: function (obj) {
new Effect.Appear(''menu_block_container3'', {duration: 1.0,
afterFinish: function (obj) {
new Effect.Fade(''menu_block_container3'', {duration: 5.0,
afterFinish: function (obj) {
new Effect.Appear(''menu_block_container4'', {duration: 1.0,
afterFinish: function (obj) {
new Effect.Fade(''menu_block_container4'', {duration: 5.0,
afterFinish: function (obj) {
new
Effect.Appear(''menu_block_container1'')}})}})}})}})}})}})}});
3. I need this whole slide show to repeat itself constantly - whenever
the last div is reached, start from the first one all over again. and
if I put this code inside a loop it stops after the first iteration.
4. about the onload - that''s the easy part, but how do you do that
whenever you exit a page it will fadeout?
thanks again,
Elad.
On Mar 14, 10:48 pm, Xavier Noria
<f...-xlncskNFVEJBDgjK7y7TUQ@public.gmane.org>
wrote:> On Mar 14, 2007, at 8:13 PM, Elad wrote:
>
> > 1. I want a div to fade out after 3 seconds, and appearing again with
> > changed content (different image and text). This should create a cycle
> > of about 5 changing div''s, which will repeat constantly,
creating a
> > fade-in fade-out slideshow.
>
> You could chain them via the afterFinish parameter
>
> <div id="foo">
> Foo
> </div>
> <div id="bar" style="display: none">
> Bar
> </div>
> <script type="text/javascript" charset="utf-8">
> new Effect.Fade(''foo'', {afterFinish: function (obj) {
new
> Effect.Appear(''bar'') }})
> </script>
>
> See the docs at the bottom of
>
> http://wiki.script.aculo.us/scriptaculous/show/CoreEffects
>
> > 2. I want all my site''s pages to fade in when loaded, and
fade out
> > when exited, creating a nice flow within the site, regardless of the
> > current page''s content.
>
> Wrap the content in a DIV with display set to "none" and attach
the
> appear effect to the onload event:
>
> window.onload = function () {
> new Effect.Appear(''main'', {duration: 2});
> }
>
> I like very much that effect, I do that in my website as well:
http://www.hashref.com.
>
> -- fxn
--~--~---------~--~----~------------~-------~--~----~
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2007-Mar-15 07:19 UTC
Re: script.aculo.us Effects Fade & Appear question
Hi there, Elad a écrit :> Thanks, this really does help me a lot, but still it''s not exactly > what I wanted - > 1. I need a pause between each fadein and fadeout. something like 3 > seconds. > 2. I need 4 div''s, and in this way, the code gets really ugly -This exact same need has been answered countless times on the list. Please, people, *search* the list''s archives before posting. In essence: you need to use effect queues. These let you queue as many effects as you need, which sounds good for you. On the other hand, in order for the delay to be present between fades (btw, 3 secs will lose your users IMHO), you need to set your effect''s delay option accordingly. Here''s a small example: new Effect.Fade(''someID'', { queue: {scope: ''fadeovers'', position: ''end'' }); new Effect.Appear(''someID'', { queue: {scope: ''fadeovers'', position: ''end'', delay: 3 }); ... ''HTH -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On Mar 14, 2007, at 9:48 PM, Xavier Noria wrote:> <script type="text/javascript" charset="utf-8"> > new Effect.Fade(''foo'', {afterFinish: function (obj) { new > Effect.Appear(''bar'') }}) > </script>This is worse than the solution based on queue, sorry! -- fxn --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---