eSpace Blog RSS
22Feb

Scriptaculous Effect Queues

1

Most Javascript developers know Scriptaculous library and its great effects classes. Using Scriptaculous Effects helps you add nice effects to your web page elements with a few Javascript lines.

While working on a RoR project in eSpace, I faced a problem while applying some effects to some elements in my web page.

What I was doing in the web page was  to hide some div element and then show another div; I was using the "Slide down/up" effects for both div-1 and div-2. What I needed was for div-1 to slide up, then div-2 would start to slide down after that, but what I got was both div-1 and div-2 starting their sliding at the same time.

While searching for a solution to synchronize these two effects, I found that Scriptaculous contains a solution for this issue by using something called Effect Queue. Effect.Queue is an improved array of Effects that is global for the entire page.

All the effects you do in the web page are added to the global queue but will all run in parallel like what I got in my situation. So, how can I use the Effect.Queue to solve this issue?

All the effects you want to queue for running further apart should be added to this global queue in positions (front/end) and they will run one by one. When you are creating an effect, you can pass several arguments. One of those arguments is the queue position (queue) option.

Let's see how I can handle my situation using Effect.Queue:

new Effect.SlideUp('div-1');
new Effect.SlideDown('div-2', { queue: 'end' });

Argument queue : 'end' means this effect will be added to the end of the global queue. So, in the web page global queue, there are two effects. The first one is the slide up for div-1 and then the second one is the slide down for div-2. Now, they will run one after the other as required.

Written By:

Wael Shaban (wshaban.blogspot.com)

Comments

1 software development company wrote: on Friday, August 14, 2009:

Interesting,
Thanks for bringing this up

Post a Comment

eSpace podcast Prodcast

RSS iTunes

Archive

Latest Comments