Script.aculo.us: How to easily AJAX your site

by Ryan Carter Dec 29th 2006

Script.aculo.us is an amazing framework for enriching your website's user experience very easily. Built on top of the very popular prototype javascript framework, scriptaculous makes AJAX cake, and gives everyone the power to have a sexy AJAX-powered website, yes everyone. Scriptaculous is a tiny (140kb) javascript framework that gives you the power of effects, several dynamic data components, and all you need to know is a little bit about HTML and how to read. If you already have your own website, it is not hard to do. Follow these steps to AJAX up your site in no time:

Download script.aculo.us. Click on any of these links to begin downloading the zip, tar.gz, or tar.bz2 version.
Unzip the archive somewhere, preferably somewhere you will find it again. This is key.
Upload the whole thing to your web server, and put it where ever you like, again, it should be somewhere you can find it. Once again, finding it is key. You will need to link to these files from your web page, so putting the files in a sub folder of your home directory (root for you unix junkies) is a good idea.
In the header section of your web pages, you need to put this code:
```
<script src="ajax/prototype.js" type="text/javascript"></script>
<script src="ajax/scriptaculous.js" type="text/javascript"></script>
```
As you might notice, the code has to point to your uploaded script.aculo.us files. You would replace the "ajax/" portion with your own path depending on the name of your subfolder.
Next, put the one line of code into your pages or posts where ever you want the effect to take place. Let's say you have a content div element you want to have all the sudden appear in the page, all you do is wire the "SlideDown" effect (one of many in script.aculo.us, download the cheat sheet here) to a button, link, or other clickable element on your page. The code to trigger the SlideDown effect from a link looks like this:

<a href="#" onclick="Effect.SlideDown('content');">SlideDown Now!</a>

Why use an <a> tag? First, it is super simple to code (everyone knows it), and second, users think it is an ordinary link. They will be quite surprised when they find out it isn't normal at all. I call this "hacking old-skool users into using web 2.0 unknowingly" (or something like that).
Anyway...be sure your div tag has the id="content" because that is the name of the element the SlideDown effect will be applied to once you click the "link" we just made. Make sense? Good. NOTE: Something to remember is that your DIV will be shown on the page automatically by default, unless you first hide it, so the visual magic of an effect such as SlideDown can really be displayed. To "hide" our div by default so your content won't appear until you click the link we just made, you will need to add an inline CSS style (or add one in your CSS file, if you have one) so the content div ends up looking like this:
```
<div id="content" style="display: none;">This is the content.</div>
```
You'll notice (I hope) that the underlined code is the part that hides this div by default. When the SlideDown effect is triggered by clicking on the <a> link, it will automatically change the div's display property, so don't worry about having to do that.
Try it out, and have fun! It should slide down your content, which can be anything you put in that div tag, video, audio, pictures, more javascript, an iframe, whatever, use your imagination. There are tons of different effects you can use, so you should check them out at script.aculo.us's website, since they have great demos and even combination demos for different sets of effects.

Since the script.aculo.us wiki is large and contains a lot of information to consume all at once, I have compiled a basic script.aculo.us effects cheat sheet of sorts for your quick and dirty coding enjoyment. You can download my PDF cheat sheet here.

Have fun AJAXing your site, and once you're done, come back and give us a link to your site so we can see what you've done with the place. I'd love to check out your site with the framework in action. It can do some wicked cool stuff. You can build entire sites out of script.aculo.us including AJAX drop-downs, AJAX page loading, and custom stuff. Let me know how your site turns out with it.

NOTE (to lightbox and TinyMCE users): There are some special instructions on integrating script.aculo.us with both of these other frameworks, since they all use Prototype to some extent. You can find TinyMCE help here (script.aculo.us wiki) and most lightbox frameworks list this info on their support page or forums section of the site. Have fun!

Tags: AJAX, cheat sheet, CheatSheet, development, DIY, do-it-yourself, effects, how to, how-to, HowTo, javascript, script.aculo.us, scriptaculous, Thomas Fuchs, ThomasFuchs, web development, WebDevelopment, website

Reader Comments (Page 1 of 2)

Richard Davies said 1:11PM on 12-29-2006

Since when is a 140kb JavaScript library considered "tiny"? When compared to something like MooTools http://www.mootools.net or jQuery http://jquery.com/ which are between 8-30kb, I'd say Script.aculo.us is "huge"... ;-)

Ryan Carter said 1:17PM on 12-29-2006

140KB is the whole package including all the documentation and a lot of extra options. The script.aculo.us file itself is 4KB, so it is a bit smaller than both. Check out script.aculo.us and you'll see why it is easier to use and much more powerful than mootools and jquery. I like mootools as well, but it more difficult than script.aculo.us to use. The support for script.aculo.us also makes using worthwhile.

Mystery Man said 3:13PM on 12-29-2006

Really nice post, i've been wanting to use scrptalicuous for a long time, this made me once and for all download it and start using it

140kb is a lot XD but the results are great :D

m3nt0r said 4:35PM on 12-29-2006

Good write up Ryan! I must say i was a little surprised to read such things on downloadsquad tho.

"The script.aculo.us file itself is 4KB,
so it is a bit smaller than both." -Ryan

The scriptaculous.js is nothing but a loader. Of course the file is small. But it loads all secondary files like effects.js, builder.js, etc.. behind the
scene. Those are all around 5 to 20kb. And also don't underestimated the library which scriptaculous is based on. prototype.js weights around 50kb.

The idea behind the loader is, that if the visitor has no javascript enabled he dont have to download all javascript files (since the loader wouldnt execute).

I suggest using Http-GZip. This way the javascript will be half the size.

Hope this helps.

Mark said 4:39PM on 12-29-2006

That cheat sheet you made is AWESOME!

ngharo said 4:39PM on 12-29-2006

Script.aculo.us is great fun to use. Prototype is more of the heavy lifter when it comes to using AJAX. Note that Effect.SlideDown is not AJAX but one of Script.aculo.us core effects.

I believe this article merits a link to Prototype
http://prototype.conio.net/

And documentation
http://www.sergiopereira.com/articles/prototype.js.html

Shaun said 4:40PM on 12-29-2006

This isn't ajax. It's javascript effects. AJAX is communicating with a web server using javascript.

scotty said 4:41PM on 12-29-2006

^ Agreed. Though the little cheat sheet you wrote Ryan is nice for little effects and such, it has nothing to do with AJAX (wiki the meaning). Digging deeper in the Scriptaculous capabilities, though, shows some AJAX features; such as text-field auto-completion based on info in a database.

watch tv online said 4:43PM on 12-29-2006

Cool, but scriptalicious contains a lot more stuff then you need for just plain simple ajax page grabs.

m3nt0r said 4:46PM on 12-29-2006

Good write up Ryan!
I must say i was a little surprised to read such things on downloadsquad tho.

"The script.aculo.us file itself is 4KB, so it is a bit smaller than both." -Ryan

The scriptaculous.js is nothing more then a loader. Of course the file is small. But it loads all secondary files like effects.js, builder.js, etc.. behind the scene. Those are all around 5 to 20kb. And also don't underestimated the library which it is based on. prototype.js weights around 50kb.

The idea behind the loader is, that if the visitor has no javascript enabled he dont have to download all javascript files (since the loader wouldnt execute).

I suggest using Http-GZip. This way the javascript will be half the size.

Hope this helps.

Prashanth said 4:51PM on 12-29-2006

Sounds scrum.ptio.us .
And thanks for blogging on it.
Remember blogging is the key.
else I wouldn't have known.
thanks

Cam said 5:02PM on 12-29-2006

I hate to tell you this, you look like you know what you are doing and all, but AJAX and Javascript are two totally different things my friend.

Scriptilicious is just javascript, doing what used to be called Dynamic HTML, or DHTML for short.

Ajax is a MUCH harder beast to tame, and simply adding javascript effects to your website will bring you no closer to having AJAX on your site.

jamec c unix said 5:26PM on 12-29-2006

Root isnt anyones homedir besides well, the root user. And on most linux/bsd systems you have /root or /usr/root instead of / as it is by default in solaris.

Joe said 5:26PM on 12-29-2006

While the scriptaculous and prototype libraries do indeed provide support for AJAX and allow you to do AJAXy things relatively easily (in particular, the prototype library)... the example you provided is just a simple javascript effect (as others have mentioned).

TDF said 5:27PM on 12-29-2006

Great post! The script is a bit too large but is sounds great and I will be trying it out over the weekend.

----
http://www.thedollarfactory.com/blog

shfx said 7:12PM on 12-29-2006

How anybody can write about Ajax while thinking about javascript. Oh and it's Ajax not AJAX :)

Jeriko One said 9:28PM on 12-29-2006

The script.aculo.us file itself is 4KB

Correct. But the file itself is just a wrapper to call all the other core files of script.aculo.us, which sums up to about 126 Kilobyte if you use them all - Prototype not even included. The whole package comes in at about 180 Kilobyte - or in other words, way too much if you don't make use of all the advantages.

And like Shaun mentioned, the example described here has absolutely nothing to do with ajax.

lester said 10:50PM on 12-29-2006

I will NEVER visit your site again. Apparently one of your advertisers (or yourselves) hijacked my session and forwarded me to www.drivecleaner.com . If you or your advertisers did this, I will not only avoid your site for all future, but I will also actively discourage everyone from visiting it. And I will blog about it. I can't believe some people still think you get away with this kind of behaviour.

Don Wilson said 11:24PM on 12-29-2006

Jesus Christ, Ajax IS NOT fancy visual things.

DownloadSquad is turning into Noobcity very quickly.

Sergio said 12:46AM on 12-30-2006

What a coincidence. I've just spend a good part of today updating the prototype docs page that I keep (already mentioned in another comment) with a few v1.5.0 goodies.
Enjoy:
http://www.sergiopereira.com/articles/prototype.js.html

| 1 | 2 | Most Recent | Next 20 Comments

Featured Time Waster

Civiballs is a beautiful, soothing physics puzzle Time Waster

I have an absolute weakness for physics games, and while Civiballs isn't the strongest physics-based game, what it lacks in the physics department it makes up for a few times over in style and fun.

In Civiballs, you are presented with a few colored balls, and your goal is to get those balls into the same-colored urn on the level. The "civi" part of Civiballs is that there are 3 sets of levels to play, each representing a different civilization. While the civilization doesn't affect gameplay, the artwork for each level is beautifully themed to it's appropriate era.

To play the game, you are given only one tool - a sword with which to cut the chains that are holding the balls. The puzzle part of the game is in figuring out what order, and with what timing to cut each chain. Do it right, and all the right balls end up in the right urns, with no stray balls entering an urn (a no-no). Do it wrong, and you get to start over again.

Civiballs is not terribly deep on gameplay; the entire game can be completed in about 15 minutes. But if you enjoy this type of game, it will be a very enjoyable 15 minutes.

View more Time Wasters