Friday, February 03, 2006

Using the Scriptaculous JS Library

This is a very short introduction to Scriptaculous, explaining what it is, why you care, and a few short examples. I am currently using this in a project, and will post additional entries as I begin to use more and more of the library.

Scriptaculous is a JavaScript library that is makes it relatively easy to add drag-and-drop functionality, dynamic drop-down menus, and visual effects. Unfortunately the documentation is fairly light, so there is a bit of a learning curve. You will also need to use the Prototype JavaScript library as Scriptaculous relies on some of it's tools.

You will care about this library if you want to develop rich user interfaces, and don't currently have some other JavaScript library that you rely on. It can save you an incredible amount of time.

As promised, I will share a few short examples. All of these require the following script includes in the HTML:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>

Example 1: If you have taken a look at some of the newer web apps using Ajax, you will find some of them will highlight a part of the page to make it obvious to the user that something has changed. See Digg Spy for an example. The following code will flash the DIV yellow when it is clicked.

<div id="highlight_this" onclick="new Effect.Highlight('highlight_this')">Hello World</div>

Example 2: This DIV will slide up slowly and disappear when clicked on. Note that the sliding up feature only works under Firefox, in IE it will just disappear after a short delay.

<div id="blindup_this" onclick="new Effect.BlindUp('blindup_this')">Hello World</div>

Scriptaculous has another dozen or so effects beyond this, and makes it possible to alter them in various ways. For example, you may want change the duration of the Highlight effect. I will cover these in a bit more detail in further entries.

6 comments:

Anonymous said...

hmm thx
but it doesnt work for me ...
i have put js files in js directory and made html page and kept it out of js dirctory and i get script error and nothing works.
wht else i need to do ?
Vinit

Robert Hanson said...

> wht else i need to do ?

That is hard to say without seeing the code or knowing what the script error is.

You might want to post this sort of info to the gwt-dev list. There are a lot of helpful people there.
http://groups.google.com/group/Google-Web-Toolkit

Anonymous said...

Hi,
I am new to this scriptaculous concept. I just want to create relations between dragged object using scriptaculous. Do you have solution for this? If so, please reply my ASAP.
Thanks in advance
G.Mekalaasri

Robert Hanson said...

> I just want to create relations
> between dragged object using
> scriptaculous.

Unfortunately I am not familiar with using Scriptaculous for DnD.

Anonymous said...

Hi robert,
Thanks for ur reply

G.Mekalaasri

Unknown said...

Yes there is obviously something missing here. Really not a very useful post when something is left out.