Simple Script.ac.ulous

Mike Patterson

The University of Aberdeen

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

Core Effects

• Effect.Move

• Effect.Opacity

• Effect.Scale

• Effect.Highlight

• Effect.ScrollTo

• Effect.Morph //1.7+

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 } )

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'})

Effect.Move

• This effect moves an element by modifying its position attributes

• onclick="new Effect.Move( 'mydiv‘ , { x: 60, y: 30 } );

• Demo

Effect.Opacity

• This effect changes an element’s opacity (transparency)

• new Effect.Opacity( ‘mydiv’, { from: 1.0, to: 0.7, duration: 0.5 });

• Demo

Effect.Highlight

• This effect can draw attention to something important

• new Effect.Highlight(‘mydiv', {options});

• Demo

Morphing

• This effect changes the CSS properties of an element.

• $(‘mydiv’).morph(‘font-size:20px; color:#666666’);

• Demo

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

Sortable

• Demo• Setpoint

Ajax-based autocompletion

• new Ajax.Autocompleter(id of text field, id of div to populate, url, options);

• Demo

Highslide

• Highslide JS is open source JavaScript software, offering a Web 2.0 approach to popup windows. (http://vikjavev.no/highslide/)

• Really easy to use

• Very elegant

• Demo

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 Demo