javascript: October 2006 Archives

Easy Script.aculo.us Effect

| | Comments (0) | TrackBacks (0)

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.

About this Archive

This page is a archive of entries in the javascript category from October 2006.

Find recent content on the main index or look in the archives to find all content.

javascript: October 2006: Monthly Archives

Powered by Movable Type 4.0