Script.aculo.us

An introduction to the script.aculo.us [1] library.

Load 'em up:

<div>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<!--Supposedly loading just this one will load all others,
    but that did not work for me. -->

<!--Also, if using xhtml then comment out the 'document.write'
    in scriptaculous.js to avoid error msg. -->

<script src="js/effects.js" type="text/javascript"></script>
<script src="js/builder.js" type="text/javascript"></script>
<script src="js/dragdrop.js" type="text/javascript"></script>
<script src="js/controls.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
</div>

Call the functions:
onclick="new Effect.BlindUp(this, {duration: 8})"

Time-based animations.
Cross-browser compatible.
Apply to any element by gicing its id.

Opacity: change opacity.
new Effect.Opacity('opacity', {duration:5, from:1.0, to:0.1})
Scale: changes width and height dimensions and base for em units.
new Effect.Scale('scale', 120)
MoveBy: moves an element by a given x/y pair of pixels.
new Effect.Opacity('opacity', {duration:5, from:1.0, to:0.1})
Highlight: flashes a color as the background of the element.
new Effect.Highlight('highlight', {startcolor:'#ffffff', endcolor:'#ff9999'})

Parallel: combines other effects together in parallel.

new Effect.Parallel(
    [ new Effect.MoveBy('parallel', -400, 0,
        { sync: true }), 
      new Effect.Opacity('parallel', 
        { sync: true, to: 0.0, from: 1.0 } ) ],
    { duration: 5, 
      afterFinish: function(effect)
        { Element.hide('parallel'); } 
    }
  );

All take the following parameters:

Option	since	Description
duration	V1.0 [2]	Duration of the effect in seconds, given as a float. Defaults to 1.0.
fps	V1.0 [3]	Target this many frames per second. Default to 25. Can’t be higher than 100.
transition	V1.0 [4]	Sets a function that modifies the current point of the animation, which is between 0 and 1. Following transitions are supplied: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble and Effect.Transitions.flicker.
from	V1.0 [5]	Sets the starting point of the transition, a float between 0.0 and 1.0. Defaults to 0.0.
to	V1.0 [6]	Sets the end point of the transition, a float between 0.0 and 1.0. Defaults to 1.0.
sync	V1.0 [7]	Sets whether the effect should render new frames automatically (which it does by default). If true, you can render frames manually by calling the render() instance method of an effect. This is used by Effect.Parallel().
queue	V1.5 [8]	Sets queuing options. When used with a string, can be ‘front’ or ‘end’ to queue the effect in the global effects queue at the beginning or end, or a queue parameter object that can have {position:’front/end’, scope:’scope’, limit:1}. For more info on this, see Effect Queues [9].
direction	??	Sets the direction of the transition. Values can be either ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’ or ‘center’ (Default). Applicable only on Grow and Shrink effects.

Other options let you set up callback functions to be called during effect.

Callback	since	Description
beforeStart	V1.0 [10]	Called before the main effects rendering loop is started.
beforeUpdate	V1.0 [11]	Called on each iteration of the effects rendering loop, before the redraw takes places.
afterUpdate	V1.0 [12]	Called on each iteration of the effects rendering loop, after the redraw takes places.
afterFinish	V1.0 [13]	Called after the last redraw of the effect was made.

function myCallBackOnFinish(obj){
  alert("the Element's id the effect was applied to is :" + obj.element.id);
}
function myCallBackOnStart(obj){
  alert("the Element object the effect will be applied to is :" + obj.element);
}

Click for Effect.Appear demo

Click for Effect.Fade demo

Click for Effect.Puff demo

Click for Effect.BlindDown demo

Click for Effect.BlindUp demo

Click for Effect.SwitchOff demo

Click for Effect.SlideDown demo

Click for Effect.SlideUp demo

Click for Effect.DropOut demo

Click for Effect.Shake demo

Click for Effect.Pulsate demo

Click for Effect.Squish demo

Click for Effect.Fold demo

Click for Effect.Grow demo

Click for Effect.Shrink demo

Click for Effect.Highlight demo

Give the user more control over the page.
Drag and drop, autocompletion, and in place editing.

To make an element draggable just say:
new Draggable('drag',{revert: true});
Other options include: snap, zindex, constraint (horizontal or vertical), ghosting.
A droppable container can be created with:
Droppables.add('drop', {accept: 'dragme', hoverclass: 'highlight'});

Sortable lets you sort lists:

Sortable.create("firstlist",
  {dropOnEmpty:true,
   containment:["firstlist","secondlist"],
   constraint:false});
Sortable.create("secondlist",
  {dropOnEmpty:true,
   handle:'handle',
   containment:["firstlist","secondlist"],
   constraint:false});

This is the first list

Item 1 from first list.
Item 2 from first list.
Item 3 from first list.

And now the second list

HANDLE Item 1 from second list.
HANDLE Item 2 from second list.
HANDLE Item 3 from second list.

A slider can be set up with:

<div id="track1" style="width: 400px; 
                        background-color: rgb(170, 170, 170); 
                        height: 5px;">
<div id="handle1" class="selected" 
  style="width: 10px; height: 10px; background-color: rgb(255, 0, 0); 
                                   cursor: move; 
                                   left: 0px; 
                                   position: relative;"/>
</div>
<div id="debug1" style="padding-top: 5px;"></div>

    new Control.Slider('handle1','track1',{
        onSlide:function(v){$('debug1').innerHTML='slide: '+v},
        onChange:function(v){$('debug1').innerHTML='changed! '+v}});

3.2 Autocompletion

Autocomplete Locally with:

<label for="bands_from_the_70s">Your favorite rock  band from the 70's:</label>
<br />
<input id="bands_from_the_70s" autocomplete="off" size="40" type="text" value="" style="" /></p>
<div class="page_name_auto_complete" id="band_list" style="display:none"></div>
<script type="text/javascript"></script>
<script type="text/javascript" src="autocomplete.js"></script>

new Autocompleter.Local('bands_from_the_70s', 'band_list', [...])
Your favorite rock band from the 70's:

see here

The Ajax autocompleter looks like:
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/url/on/server", {});

3.3 In Place Editing

Use
new Ajax.InPlaceEditor('editme', './index.html');
Click me, click me!

see here
For a longer text box use:
new Ajax.InPlaceEditor('editme2', '/demoajaxreturn.html', {rows:15,cols:40});
Click me to edit this nice long text.
In place collection editor:
new Ajax.InPlaceCollectionEditor( 'tobeedited2', '_ajax_inplaceeditor_result.html', { collection: [[0,'one'],[1,'two'],[2,'three']], value: 0, ajaxOptions: {method: 'get'} //override so we can use a static for the result });
Click me NOW!.

URLs

09 March 2007, 04:16PM

Script.aculo.us

1 Setup

2 Visual Effects

2.1 Core Effects

2.1.1 Effect Callbacks

2.2 Combination Effects

3 Controls

3.1 Drag and Drop

This is the first list

And now the second list

3.2 Autocompletion

3.3 In Place Editing

URLs