script.aculo.us Quick Reference

This quick reference guide is a work in progress. I’ve been working with the script.aculo.us framework directly in a project that I’m working on, and this guide is the result. I’m trying to make it more user-friendly and interactive.


Installation
 Install  Copy all the script.aculo.us files into a directory. I called mine “js”
 
 
Effects
The script.aculo.us library provides a lot of great dynamic effects. All of the effects can take a set of options such as duration and fps. Detailed documentation for the effects can be found on the official documentation page.

Syntax:
new Effect.EffectName( element, required-params, [options] );
 Click for Effect  

Appear

 
   

BlindDown

 
   

BlindUp

 
   

DropOut

 
   

Fade

 
   

Fold

 
   

Grow

 
   

Highlight

 
   

Puff

 
   

Pulsate

 
   

SwitchOff

 
   

SlideDown

 
   

SlideUp

 
   

Shake

 
   

Squish

 
   

Shrink

 
   
   
In Place Editor Control
 

The In-Place Editor control is found in a lot of Ruby on Rails applications. This control is a part of the scriptaculous library, and is very simple to use in any language.

Syntax:

new Ajax.InPlaceEditor( element, url, [options]);

There are a variety of useful options to be passed to the server to customize virtually every feature of the control.  You can find a current list at the offical documentation page.

   Example:
Edit Me In-Place  
   
Slider Control

The Slider Controls let you provide a more dynamic method for selecting from within a range of values. When using this control, make sure that the javascript is below the html elements that you are using for the sliders.

The slider controls take a number of options that specify callback functions. If your application requires a fully dynamic slider, you will override the onSlide() function with your functionality. If you only need the final selection value, override the onChange() function.
Horizontal Slider
 
   
Vertical slider
 
   

10 Responses to “script.aculo.us Quick Reference”

  1. Suhas Says:

    How to save record using ‘In Place Editor’?

  2. Lee Says:

    To suhas, I’ve ever written such a post . You can visit it at http://www.jroller.com/page/coreteam?entry=in_place_editing_with_script

    or

    http://www.memezilla.com/2006/09/18/in-place-editing-with-scriptaculous-in-jsp

  3. mauro Says:

    hi johnny,
    i’m looking for an answer but i could not find it. i’m using 2 effects of scriptaculous:
    i have a list of items (div not td). if i click on item A a submenu will slides down form it. than if i click item B another submenu slides from it. i would like that the submenu of item A slide up.
    the second is the effect appear. if i click on a item of the submenu an image appear. than i click on the item B of the submenu, and another image appear. than, if i click back on the item A nothing appear, the image A is “under” image B. how can i change that?
    many thanks
    mauro

  4. adrian Says:

    Thank you so much for this. Their site is really confuse…

  5. scorp Says:

    yepp i agree with the others very helpful and easy to rebuild. love it!!
    greetings!

  6. Sony Says:

    Where do i get the javascript files like prototype.js and scriptaculous.js and include in my files

  7. Copes Flavio Says:

    Really useful reference! Thanks

  8. Raghu Says:

    Very very nice. One thing I noticed with the explosion of web 2.0, there are so many javascript/ajax libraries. It is always good to have choices but gets little confusing. Do you use anything other than mentioned above? I would love to see a guide that explains what libraries do you use and when.

    Thanks again for all the guides.
    -Raghu

  9. Jon Parker Says:

    Johnny, thanks for putting up a great reference! I appreciate you taking the time to help others out! — jp

  10. Vinny Benson Says:

    how do you set the fold effect to work with a certain ‘div’, using an image button… someone please help me