The goal: Fade out some content using Effect.Fade, replace that content with Ajax.Updater and have it Fade in. Fade out old, Fade in new. However, i can''t seem the right combination of prototype and scriptaculous rules to accomplish this. In addition to it fading in, I would ideally like box to blinddown or blindup depending on if the content is more or less than the original content that is being replaced. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Hey, This has been answered countless times before. anathema a écrit :> The goal: Fade out some content using Effect.Fade, replace that > content with Ajax.Updater and have it Fade in. Fade out old, Fade in > new. However, i can''t seem the right combination of prototype and > scriptaculous rules to accomplish this.You can either use only afterFinish callbacks on effects, or queue up an Effect.Fade and an Effect.Appear. Something like: var queueParam = { scope: ''outThenIn'', position: ''end'' }; Effect.Fade(yourElt, { duration: 0.5, queue: queueParam, afterFinish: function() { yourElt.update(yourNewContent); } }); Effect.Appear(yourElt, { duration: 0.5, queue: queueParam });> In addition to it fading in, I would ideally like box to blinddown or > blindup depending on if the content is more or less than the original > content that is being replaced.If you can actually measure the height of the former and new contents, you can arrange that with replacing the final Effect.Appear by a Effect.Parallel over the Appear and a BlindUp/Down, or by going manual with an Effect.Morph. One last thing: Fade will end up setting your element''s display to none, which will probably cause reflow; if you don''t want that, replace Fade/Appear with Opacity and manual from/to parameters (1/0 for Fade, 0/1 for Appear, which is the default). ''HTH -- Christophe Porteneuve aka TDD 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 -~----------~----~----~----~------~----~------~--~---
I have come up with some code that works, however, after I posted I
realized that using BlindUp/BlindDown is not what I am after. Let''s
assume I have a small amount of content.. a paragraph for example. The
content retrieved via ajax is significantly more. I would like the
container to grow and animate according to the amount of content that
is retrieved. Since I want it to grow/shrink based on the amount of
content i will never know the height of the container.
Here is the code I came up with -
new Effect.Parallel([
new Effect.Opacity(''example-8'', { to: 0 }),
new Effect.BlindUp(''example-8'')
], { duration: 2, afterFinish: function() {
new Ajax.Updater(''example-8'',
''fade-content.html'', {
method:''get'',
onComplete:function(){ new Effect.Parallel([
new Effect.Opacity(''example-8'', { from: 0, to: 1 }),
new Effect.BlindDown(''example-8'')
], { duration: 2});}
});
} });
As a small side question, i tried to use
new Effect.toggle(''example-8'', ''blind'')
but that did not work for some reason and i can''t figure out why.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---