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:
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.<script src="ajax/prototype.js" type="text/javascript"></script>
<script src="ajax/scriptaculous.js" type="text/javascript"></script> - 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> - 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.
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!
Reader Comments (Page 1 of 2)
12-29-2006 @ 1:11PM
Richard Davies said...
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"... ;-)
Reply
12-29-2006 @ 1:17PM
Ryan Carter said...
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.
Reply
12-29-2006 @ 3:13PM
Mystery Man said...
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
Reply
12-29-2006 @ 4:35PM
m3nt0r said...
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.
Reply
12-29-2006 @ 4:39PM
Mark said...
That cheat sheet you made is AWESOME!
Reply
12-29-2006 @ 4:39PM
ngharo said...
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
Reply
12-29-2006 @ 4:40PM
Shaun said...
This isn't ajax. It's javascript effects. AJAX is communicating with a web server using javascript.
Reply
12-29-2006 @ 4:41PM
scotty said...
^ 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.
Reply
12-29-2006 @ 4:43PM
watch tv online said...
Cool, but scriptalicious contains a lot more stuff then you need for just plain simple ajax page grabs.
Reply
12-29-2006 @ 4:46PM
m3nt0r said...
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.
Reply
12-29-2006 @ 4:51PM
Prashanth said...
Sounds scrum.ptio.us .
And thanks for blogging on it.
Remember blogging is the key.
else I wouldn't have known.
thanks
Reply
12-29-2006 @ 5:02PM
Cam said...
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.
Reply
12-29-2006 @ 5:26PM
jamec c unix said...
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.
Reply
12-29-2006 @ 5:26PM
Joe said...
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).
Reply
12-29-2006 @ 5:27PM
TDF said...
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
Reply
12-29-2006 @ 7:12PM
shfx said...
How anybody can write about Ajax while thinking about javascript. Oh and it's Ajax not AJAX :)
Reply
12-29-2006 @ 9:28PM
Jeriko One said...
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.
Reply
12-29-2006 @ 10:50PM
lester said...
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.
Reply
12-29-2006 @ 11:24PM
Don Wilson said...
Jesus Christ, Ajax IS NOT fancy visual things.
DownloadSquad is turning into Noobcity very quickly.
Reply
12-30-2006 @ 12:46AM
Sergio said...
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
Reply