1. Simple Script.ac.ulous Mike Patterson The University of Aberdeen

2. What is Script.aculo.us? A set of JavaScript libraries to enhance the user interface of web sites. It provides among other things a visual effects engine, a drag and drop library, sortable lists and Ajax-based auto-completion. It’s really easy to use. It’s get the job done fast! Used on sites like Apple, NASA, CNN and web applications such as Twitter and Basecamp

3. Core Effects Effect.Move Effect.Opacity Effect.Scale Effect.Highlight Effect.ScrollTo Effect.Morph //1.7+

4. Effect Options { Speed } delay – Time in seconds before effect starts duration – How long (in seconds) from start to finish Example new Effect.Highlight( ‘mydiv’, { delay: 0.5, duration: 5.0 } )

5. Effect Options { transition } flicker – Randomly picks from last 25% of frames. linear – Steady transition. pulse – Runs through transitions five times. reverse – Does effect backward. spring – Overshoots final result then bounces back and forth to final value. Example new Effect.Highlight(‘mydiv’, {duration: 10, transition: 'pulse'})

6. Effect.Move This effect moves an element by modifying its position attributes onclick="new Effect.Move( 'mydiv‘, { x: 60, y: 30 } ); Demo

7. Effect.Opacity This effect changes an element’s opacity (transparency) new Effect.Opacity( ‘mydiv’, { from: 1.0, to: 0.7, duration: 0.5 }); Demo

8. Effect.Highlight This effect can draw attention to something important new Effect.Highlight(‘mydiv', {options}); Demo

9. Morphing This effect changes the CSS properties of an element. $(‘mydiv’).morph(‘font-size:20px; color:#666666’); Demo

10. Combination Effects All the combination effects are based on the Core Effects Effect.Appear, Effect.Fade Effect.BlindDown, Effect.BlindUp Effect.SlideDown, Effect.SlideUp Effect.Pulsate Effect.Squish Effect.Fold Effect.Grow Effect.Shrink Can also be used with Effect.toggle onclick="Effect.toggle(’content_to_show’, ’slide’)“ Techfest Demo

11. Sortable Demo Setpoint Ajax-based autocompletion new Ajax.Autocompleter(id of text field, id of div to populate, url, options); Demo

12. Highslide Highslide JS is open source JavaScript software, offering a Web 2.0 approach to popup windows. (http://vikjavev.no/highslide/)http://vikjavev.no/highslide/ Really easy to use Very elegant Demo

13. Check List Will your users benefit? - are there real usability improvements? Think twice about when and what effects to add - "Because it's possible" is not a good argument. Don't overuse effects! I’m not a Javascript expert, nor a script.aculo.us expert but I like the fact that you can start using it “out of the box” Similar to JQuery, Dojo, Moo.fx DemoDemo