Easy Script.aculo.us Effect

With script.aculo.us javascript library it is absolutely easy to add nice visual gizmos to your page.

On my page is used prototype and scriptaculous lib.

<script src="../scripts/prototype.js" mcesrc="../scripts/prototype.js" type="text/javascript"></script> <script src="../scripts/scriptaculous.js" mcesrc="../scripts/scriptaculous.js" type="text/javascript"></script>

The part I actually used, was an Effect. Effects can be performed on <div> tags for example, essential is an existing unique id-attribute. So the target for the effect looked like this:

<div id="content"> <jsp:include flush="false" page="aPage.jsp"/> </div>

The Effect functions should work on all so called block elements.

ADDRESS BLOCKQUOTE BODY DD DIV DL DT FIELDSET FORM, FRAME FRAMESET H1, H2, H3, H4, H5, H6 IFRAME NOFRAMES OBJECT P OL, UL, LI APPLET CENTER DIR HR MENU PRE

I called the effect in the onclick-event of an anchor element, passing the div-id as the parameter.

<a href=”http://www.innoq.com/blog/ca/wordpress/#” mcehref=”http://www.innoq.com/blog/ca/wordpress/#”onclick=”Effect.toggle(‘content’,’slide’); return false”> <img src=”../images/minimize.gif” mcesrc=”../images/minimize.gif” alt=”” /> </a>

All available effects can be found here.