Tutorial: How to use Script.aculo.us effects?
Okay, so its been a long time since I have posted any How-To’s. So, I decided to write down one for How to use Script.aculo.us effects?
Script.aculo.us is an javascript library to enhance the UI and the user experience. We are also using the same in our OpenIndx projects as well. I have mentioned it here in my previous post also.
Before, you get to hack this library, grab it from here.
Now, presuming that you have the library with you, lets rock!!!
A simple HTML file : index.html
<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>
<body>
<h2>Hello AJAX Effects</h2>
<div id=”test_this”> {Div which we will be adding effects to}
<table> {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>
</tr>
</table>
</div> {DIV ends}
</body> {Close body}
</html> {Close HTML}
Now, this was just a simple html code to insert a table which will be having fields username, password and submit button.
Lets add some Script.aculo.us effects to this code.
<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>
<body>
<h2>Hello AJAX Effects</h2>
<div id=”test_this”> {Div which we will be adding effects to}
<table> {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>
</tr>
</table>
</div>
<a href=”#” mce_href=”#” onclick=”Effect.Fade(‘test_this’);”> {here ‘test_this’ mention the “div” you need to add effect to} Fade Me</a>
</body>
</html>
Similarly, you can also add other effects, in this flow.
<a href=”#” mce_href=”#” onclick=”Effect.Shake(‘test_this’);”> Shake Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Appear(‘test_this’);”>Appear Back</a>
<a href=”#” mce_href=”#” onclick=”visualeffects(‘test_this’,’slide’);”>Slide Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Grow(‘test_this’);”>See Me Grow</a>
For further reference on effects, please refer here
Do let me know if this helps you, in giving a overview of how-to use Script.aculo.us Effects. Drop in the comments, if you have any suggestions too.
Cheerz
Sridhar
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
PHP and Script.aculo.us Book
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Sridhar: Web Unplugged!!!! 
hi ur site is having css problem , it is not showing properly in ie
I am working on IE, it works for fine for me here.
ANyone else also having the same problem???
–Shri
Why are you using a stylesheet to declare the javascript file??
{Here mention the path of the library}
Can’t make it work… my link to prototype & Scriptaculous is fine – but it does not work. I use WP. Any idea?
My question same as #3.. why are you declaring a javascript in the tag ?
“hi ur site is having css problem , it is not showing properly in ie” hm.. i’d turn it the other way around: IE is having issues with css. (looks alright for us firefoxing macusers)
Thanks for the tutorial btw 🙂
Want to start your private office arms race right now?
I just got my own USB rocket launcher 🙂 Awsome thing.
Plug into your computer and you got a remote controlled office missile launcher with 360 degrees horizontal and 45 degree vertival rotation with a range of more than 6 meters – which gives you a coverage of 113 square meters round your workplace.
You can get the gadget here: http://tinyurl.com/2qul3c
Check out the video they have on the page.
Cheers
Marko Fando
paid by that debtor it only advances to him a part of the value which he them. But this discovery is not altogether so easy when they discount their
hi there,
i have worked with scriptaculous for sometime. its awsome but it still got some issues like think if you need to use onclick and href=”javascrit:foo()” on a tag.
i solved the above problem from here http://24ways.org/2005/introduction-to-scriptaculous-effects
hi there,
i tried this example in firefox. N its not working, it give an error saying “Firefox can’t find the file at /X:/garima/”#”.
scriptaculous.js is not working in ie6 why can you told me . & chek this site u will reconise the prob. http://www.riverraftingtour.com in IE6 & IE7 / Mozilla.