O'Reilly logo

Prototype and Scriptaculous: Taking the Pain out of JavaScript by Chris Angus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

4.3. Toggling Effects

Scriptaculous offers a neat utility function, Effect.toggle, which allows elements to be shown or hidden using different animations. If an element is hidden, it shows it, and if it is visible, then it hides it.

Effect.toggle('id'[,effectType = 'appear');
property type values description
effectType string 'appear' toggle between Effect.Appear and Effect.Fade
   'blind' toggle between Effect.BlindUp and Effect.BlindDown
   'slide' toggle between Effect.SlideUp and Effect.SlideDown

We may user the methods above to create an activity indicator. We first create a div tag, representing that activity is occurring:

<div id='activity' style='display:none'><img src="activity.gif"></div>

We may activate this using Appear:

Effect.Appear('activity',{duration:0.5,queue:'end'};

And deactivate this using Fade:

Effect.Fade('activity',{duration:0.5,queue:'end'};
Example 4-3. activity.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <title>Using Scriptaculous</title> <script src="js/prototype.js" ></script> <script src="js/scriptaculous.js"></script> <script> function start() { $('activity').hide(); Effect.Appear('activity',{duration:0.5,queue:'end'}); showInfo(); } function stop() { Effect.Fade('activity',{duration:0.5,queue:'end'}); } </script> </head> <body> <div id='activity' style="display:none; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required