The shorter option doesn't seem to be working for me. It produces the
result I originally had. The "chained function" Walter posted does
work though. :) (Googlers: enclose the afterFinish block in { })
Thanks!
On Oct 4, 12:49 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> As usual, Walter's on the nose.
>
> FWIW, I'd add an effect queue[1] (and semicolons ;-) ) to Walter's
> simpler option below:
>
> function update_clock(){
> var clock = $('clock');
> var opts = {queue: 'q' + new Date().getTime()};
> new Ajax.Updater(clock,'clock.py',{
> onCreate:function(){clock.fade(opts);},
> onComplete:function(){clock.appear(opts);}
> });
>
> }
>
> If you find that the update is happening too quickly (so you don't
> really see the fade effect), then you might consider using
> `afterFinish` as in Walter's original reply, although that means the
> clock is invisible for the entire time it takes for the Ajax call to
> occur. Or you might ensure it will always get 0.2 or more seconds to
> fade:
>
> function startClockUpdate(){
> var clock = $('clock');
> var opts = {queue: 'q' + new Date().getTime()};
> clock.fade(opts);
> continueClockUpdate.delay(0.2, clock, opts); // 0.2 = 2/10ths
> of a second}
>
> function continueClockUpdate(clock, opts) {
> new Ajax.Updater(clock,'clock.py',{
> onComplete:function(){clock.appear(opts);}
> });
>
> }
>
> HTH,
> --
> T.J. Crowder
> Independent Software Consultant
> tj / crowder software / comwww.crowdersoftware.com
>
> On Oct 4, 5:36 pm, Walter Lee Davis <wa...@wdstudio.com> wrote:
>
> > Or even simpler:
>
> > function update_clock(){
> > var clock = $('clock');
> > new Ajax.Updater(clock,'clock.py',{
> > onCreate:function(){clock.fade()},
> > onComplete:function(){clock.appear()}
> > });
>
> > }
>
> > Walter
>
> > On Oct 4, 2009, at 12:32 PM, Walter Lee Davis wrote:
>
> > > You have some asynchronous events here, each being triggered
> > > separately, and the results are chaotic.
>
> > > Try this:
>
> > > function update_clock() {
> > > Effect.Fade('clock',
> > > afterFinish:function(){
> > > new Ajax.Updater('clock',
> > > 'clock.py',{
> > > onComplete:function(){
> > > Effect.Appear('clock');
> > > }
> > > }
> > > );
> > > }
> > > );
> > > }
>
> > > You could also investigate effect queues, but I think this sort of
> > > chained function will do you better.
>
> > > Walter
>
> > > On Oct 4, 2009, at 11:26 AM, LinkMaster03 wrote:
>
> > >> What I am trying to accomplish is a clock that updates every five
> > >> seconds. Before it updates I want it to fade out, and after it
> > >> updates
> > >> I want it to fade back in. This is what I have right now:
>
> > >> <html>
> > >> <head>
> > >> <script type="text/javascript" src="prototype.js"></script>
> > >> <script type="text/javascript" src="scriptaculous.js"></script>
> > >> <script type="text/javascript">
> > >> function update_clock() {
> > >> Effect.Fade('clock');
> > >> new Ajax.Updater('clock', 'clock.py');
> > >> Effect.Appear('clock');
> > >> }
>
> > >> new Ajax.Updater('clock', 'clock.py');
> > >> new PeriodicalExecuter(update_clock, 5);
> > >> </script>
> > >> </head>
> > >> <body>
> > >> <div id="clock"></div>
> > >> </body>
> > >> </html>
>
> > >> What happens when I open that page is odd. The clock updates, fades
> > >> in, then fades out until the next update. What am I doing wrong?
--~--~---------~--~----~------------~-------~--~----~
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-scriptaculous@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
-~----------~----~----~----~------~----~------~--~---
