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

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Advertisements

About srinix

I am Sridhar, a matured nut, on this planet with water, air and love ;)

12 responses to “Tutorial: How to use Script.aculo.us effects?”

  1. hi says :

    hi ur site is having css problem , it is not showing properly in ie

  2. srinix says :

    I am working on IE, it works for fine for me here.

    ANyone else also having the same problem???

    –Shri

  3. Amit says :

    Why are you using a stylesheet to declare the javascript file??

    {Here mention the path of the library}

  4. Gérald Morales says :

    Can’t make it work… my link to prototype & Scriptaculous is fine – but it does not work. I use WP. Any idea?

  5. shubhra says :

    My question same as #3.. why are you declaring a javascript in the tag ?

  6. Eirik says :

    “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 🙂

  7. markofando says :

    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

  8. Betty says :

    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

  9. ravi says :

    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.

  10. Garima says :

    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/”#”.

  11. Rahul Singh says :

    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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: