Sabtu, 26 Januari 2008
Another post dedicated to Scriptaculous and to a nice way to implement Toggle effect.
This tutorial explains how to implement a simple Toggle effect using Scriptaculous framework. I prepared a simple tutorial you can download to see it in action:
Download this tutorialTo use scriptaculous effect on your pages you have to add this lines of code in the <head> tag:
<script language="javascript" src="scriptaculous/prototype.js"></script>
<script language="javascript" src="scriptaculous/scriptaculous.js"></script>
<script language="javascript" src="scriptaculous/scriptaculous.js"></script>
Then, you can apply Scriptaculous Toggle effect using this simple code, for example calling this function inside "onClick" attribute:
Effect.toggle('ID','type-of-effect'); return false
...where "ID" is the element you want to apply the toggle effect and "type-of-effect" is a toggle "sub-effect" (blind, appear, slide). I chose as toggle sub-effect "blink":
<h1 onclick="Effect.toggle('about-me','blind'); return false">About me</h1>
<div id="about-me">...some content...</div>
<div id="about-me">...some content...</div>
In this way you can apply this effect to every element using HTML "id" attribute.
Download this tutorial
