Script.aculo.us: How to easily AJAX your site
- 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:
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:
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.
<div id="content" style="display: none;">This is the content.</div>
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.
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!