This document provides an overview of Scriptaculous, an open-source JavaScript library built on Prototype.js. It includes several effects, controls, and drag-and-drop capabilities. The effects allow animating elements by morphing, moving, scaling, or fading them. Controls include autocompleters, sliders, and sortables. Draggables make elements draggable while droppables enable dropping draggables onto targets. The document describes how to initialize and configure the various Scriptaculous components.

1. +
Julie Iskander
Lecturer at ITI
MSc. Communication and Electronics

2. +
Script.aculo.us
 A UI library built upon Prototype Framework, developed by
Thomas Fuchs.
 Includes:
 scriptaculous.js
 builder.js
 effects.js
 dragdrop.js
 controls.js
 slider.js
 sound.js

3. +
Script.aculo.us
 <script src=“scriptaculous.js”></script>  adds all libraries
 <script src=“scriptaculous.js?load=effects,dragdrop”></script>
 adds only specified ones

4. +

5. +
Sites that use script.aculo.us
 http://www.nasa.gov/
 http://www.apple.com/
 http://www.gucci.com/us/home
 http://rubyonrails.org/

6. +
Animation Framework

7. +
Animation
 To create animations, you need:
 target to be animated
 starting and ending point
 A way to get from starting to ending point incrementally
 Effect
 is the modification, over time, of any aspect of an element.

8. +
Core Effects
 Effect.Morph:
 takes an element and some css properties and slowly change them
 new Effect.Morph(„box‟,{style:”left:50px; top:50px”, duration:1.0});
 The box is moved through one second from its location to top:50
and left:50
 $(„box‟).morph(……);
 Effect.Move:
 move an element to a certain x and y using absolute/relative
 new Element.Move(„element‟,{x:5 , y: 5 , mode:‟absolute‟ })

9. +
Core Effects
 Effect.Scale:
 change the size of the element by a given percentage
 new Effect.Scale(„box‟,150)
 can also receive an Options object
{
scaleContent:true,
scaleFrom:50,
scaleX:false,
scaleY:true
}

10. +
Core Effects
 Effect.ScrollTo
 scroll the browser to a specific element
 new Effect.ScrollTo(„‟)

11. +
Combination Effect
 a group of core effects that run in parallel to create complex
animation.
 Effect.Fade / Effect.Appear
 animate opacity of element
 Effect.BlindUp / Effect.BlindDown
 use blinds effect to show or cover element
 Effect.SlideUp / Effect.SlideDown
 use sliding effect to show or hide element.
 Element must be double wrapped in block elements
 <div id=“box”><div>BOX</div></div>

12. +
Effect Callbacks
 passed into options argument
 beforeStart, afterStart
 beforeUpdate, afterUpdate
 beforeFinish,afterFinish

13. +
Draggables, Droppables ,
Sortables

14. +
Draggable
 Anything that can be dragged around the page.
 Examples
 new Draggable(„element‟)
 new Draggable(„element‟, options)
 Options
 revert: true/false or function, if true move the element back to initial
place at end of drag
 snap: false, [x,y],function, the delta x and delta y that the element
can be dragged to.
 handle: element or class name of element that acts as drag
handler.
 More : http://madrobby.github.io/scriptaculous/draggable/

15. +
Draggable Callbacks
 onStart
 onDrag
 onEnd

16. +
Droppable
 Objects that manages all draggable elements.
 It listens for mouse-over events to determine when an element is being
dragged into it. Then negotiates with draggable to determine if they‟re
compatible.
 Not class, can‟t be instantiated.
 Droppables.add(„element‟,options);
 Options:
 accept: class name of elements that can be dropped.
 Callbacks
 onHover
 onDrop
 More here: http://madrobby.github.io/scriptaculous/droppables/

17. +
Sortable
 A common application of drag-and-drop, where elements move
relative to one another.
 Sortable.create(„element‟, options):
 Options
 tag: default „li‟, is the tag name of children elements that can be used
as draggables.
 More here: http://madrobby.github.io/scriptaculous/sortable/

18. +
Advanced Controls

19. +
AutoCompleter
 Gives the developer the control to suggest input to textbox.
 It is indeed a textbox + div with a ul inside it
 There are 2 types
 Autocompleter.Local
 new Autocompleter.Local(„textboxID',„div id',[array of strings to
use], options);
 Ajax.Autocompleter
 new Ajax.Autocompleter(„textboxID‟,‟divID‟, „url‟);

20. +
AutoCompleter.Local
<input type="text" name="pname" id="pname" size="30">
<div id="suggestions"></div>
new
Autocompleter.Local('pname','suggestions',['Ahmed','Alaa','Moha
mmed','Ahmaad','Zara','Mona'],{choices:2});

21. +
Slider
 Creates a slider control that can be used to drag a handle to a
specific spot vertically or horizontally.
 new Slider(„handle‟,‟track‟ options)
 handle: element used as handle
 track element used as track

22. +
Slider
 Options:
 axis: horizontal or vertical
 range: $R( , )  object range takes min value and max value
 values: []  array of acceptable values
 increment: 1;
 minimum
 maximum

23. +
Slider
 Functions:
 setValue(value)
 setDisabled()
 setEnabled()
 callbacks
 onSlide(value)
 onChange(value)
 More here: http://madrobby.github.io/scriptaculous/slider/

24. +
Control.Slider
#handle{
width: 50px;
height: 20px;
background-color: #ddd; }
<div id="track">
<div id="handle"></div>
</div>
new Control.Slider('handle','track')
Note that you must give width and height to handle to avoid
exceptions

25. +
References
 http://script.aculo.us/
 Practical Prototype and script.aculo.us, Andrew
Dupont , 2008