Script.aculo.us: Difference between revisions

Revision as of 17:10, 1 September 2019

Revision as of 18:30, 11 May 2020

Line 36:

Enabling an effect is a matter of assigning an element with an ID name and one line of code for the effect. Below is an example for the Effect.Fade effect applied to a DOM element with an ID of 'message-box':

<sourcesyntaxhighlight lang="javascript">

new Effect.Fade('message-box');

</syntaxhighlight>

</source>

This will cause the target ID to fade in opacity and end by setting the CSS "display" property to "none".

Line 44:

Various other settings within the effect can be modified, such as the duration of the effect and the range of the effect:

<sourcesyntaxhighlight lang="javascript">

new Effect.Fade('message-box', {

duration: 2.0,

Line 50:

to: 0.8

});

</syntaxhighlight>

</source>

This would fade the element, but stop when the effect is 80% complete (with an opacity of 20%).

Line 70:

Builder allows creating DOM elements dynamically. Using the sample code below:

<sourcesyntaxhighlight lang="javascript">

element = Builder.node('div',{id:'ghosttrain'},[

Builder.node('div',{className:'controls',style:'font-size:11px'},[

Line 80:

])

]);

</syntaxhighlight>

</source>

...creates the following (without [[whitespace character|whitespace]]):

<sourcesyntaxhighlight lang="html4strict">

<div id="ghosttrain">

<div class="controls" style="font-size:11px">

Line 94:

</div>

</div>

</syntaxhighlight>

</source>

==References==