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

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:

1. Download script.aculo.us. Click on any of these links to begin downloading the zip, tar.gz, or tar.bz2 version.
   
   
2. Unzip the archive somewhere, preferably somewhere you will find it again. This is key.
   
   
3. 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.
   
   
4. 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.
   
   
5. 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).
   
   
6. 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.
   
7. 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