Include javascript files in the header of your document
<script type="text/javascript" src="prototype.lite.js"></script> <script type="text/javascript" src="moo.fx.js"></script>Ideally using CMS call:
<?php
$h = &getHeader();
$h->addScriptFile('/bluecms/jsapps/moofx/prototype.lite.js');
$h->addScriptFile('/bluecms/jsapps/moofx/moo.fx.js');
?>
Add create effect objects representing the effects on the page to the onload handler. (See the documentation for the list of available effects.)
var hideRow;
var show;
window.onload = function(){
hideRow = new fx.Opacity('myRowID',{duration:500});
//or start hidden
show = new fx.Opacity('showme',{duration:2500})
show.hide();
}
Each of the effects take an html ID as a target and and an optional hash containing arguments for the chosen effect.
Finally, call the effect objects in the appropriate event handlers. Effect objects have several methods but typically "toggle" is called to do/undo the effect.
<input type="button" onclick="hideRow.toggle();show.toggle();" value="!">(See the accompanying demo page for the effects in action.)
The FAT library is a single effect, single file library that implements the Yellow Fade Technique (see Adam Michela's blog for a discussion of the code and technique).
Usage is simple: include the javascript and call Fat.fade_element function on the element you wish to fade. For generated content of unknown ids (but they have to have an ID defined), you can simply assign the class of elements to "fade" and call Fat.fade_all() in the onload event.
<script type="text/javascript" src="fat.js"></script> <body onload="Fat.fade_all();"< <p class="fade" id="random_123"> This is something new that changed! </p>
Optionally you can pass additional arguments to the fade_element call to change the duration of the effect and the colors used. See the accompanying demo page for the FAT library in action.
Keeping up with all the new and advanced javascript frameworks is hard work, and the temptation is to try and find the one true framework that will satisfy all of your needs. For simplicity, however, single use or simple frameworks often make adding a tasteful touch easy as well as lightweight.