Quick Reference

This quick reference guide is a work in progress. I’ve been working with the 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.

 Install  Copy all the files into a directory. I called mine “js”
The 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.

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
































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.


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.

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 “ 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


  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

  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!!

  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.

  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