new Effect.Fade("my_element", {
duration: 3.0,
afterFinish: displayMessage
});
function displayMessage(effect) {
alert(effect.element + " is done fading now!");
}
all effects have the following events that you can handle:
beforeStart,
beforeUpdate,
afterUpdate,
afterFinish
the afterFinish event fires once the effect is done animating
useful do something to the element (style, remove, etc.) when effect is done
each of these events receives the Effect object as its parameter
its properties: element, options, currentFrame, startOn, finishOn
some effects (e.g. Shrink) are technically "parallel effects", so to access the modified element, you write effect.effects[0].element rather than just effect.element
Auto-completion
Text fields that let you type in partial text and suggest values that contain that text
Auto-completing text fields
Scriptaculous offers ways to make a text box that auto-completes based on prefix strings:
window.onload = function() {
Sortable.create("simpsons", {
onUpdate: listUpdate
});
};
function listUpdate() {
// I can do anything I like here; create an Ajax.Request, etc.
new Effect.Shake("simpsons");
}
Homer
Marge
Bart
Lisa
Maggie
Persistent saved items
problem: rearranged items are not "remembered"; they return to their original order when we revisit the page
a Sortable has events you can handle when the list order changes:
onChange : during a drag, each time the list order changes
onUpdate : when a drag is done and the order has changed
in a handler for a Sortable's event, post the data to the server to save it
Subtleties of sortable lists
if the elements of the list change after you make it sortable (if you add or remove an item using the DOM, etc.), the Sortable-ness breaks
symptom: some elements will not be draggable, or can't be dragged past
must call Sortable.create on the list again to fix it
the onUpdate event will not work unless each li has an id of the form listID_index, e.g. "simpsons_0"
new Ajax.InPlaceCollectionEditor(element or id,
url,
{
collection: array of choices,options
}
);
a variation of Ajax.InPlaceEditor that gives a collection of choices
requires collection option whose value is an array of strings to choose from
all other options are the same as Ajax.InPlaceEditor
Practice problem: Blinged out ASCII art
Modify our ubiquitous ASCII art program in the following ways:
Make it so that when the user fetches ASCII text from the server, the text area does an effect to get the user's attention.
Make the text box where you type in a student's name auto-complete the names. Do this by fetching ascii.php with no parameters to get a list of names separated by \n .
Make the list of ASCII frames rearrangeable. When the frames are rearranged, it should change the text in the text area to match.
Add a "Delete" button that makes all the frames disappear using an awesome effect, and also clears the text in the text area, making the text area get the user's attention in some way to show that it was changed.
Click effects above
Draggable demo.
