Discover the best of the web!
Learn more about Digg by taking the tour.
Script.aculo.us: How to easily AJAX your site
downloadsquad.com — Script.aculo.us 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...
5ymb10t3- 1426 diggs
- digg it
- drepmoreh, on 10/12/2007, -10/+7Cool little reference. I can't find my way around the new Script.aculo.us design at all so it's good to see all of the setup instructions on one page.
And it takes me about 3 hours trying to spell Script.aculo.us in Google. God damn Domain Hacks.- strictnein, on 10/12/2007, -2/+3Go here for some real examples and info.
http://Script.aculo.us/ - podgey22, on 10/12/2007, -5/+47"Script.aculo.us is a tiny (140KB)"
TINY?! What the hell?!
How about 14k? That's how big my FULL version of mootools is. You can have it a lot smaller as you pick what parts you need. Plus there's only one file, so it's healthier on the server too.
http://www.mootools.net
Plus: EUGH! Inline JS? Inline CSS? That's filth. Learn how to separate mark-up from design.
PLUS: AJAX? There's NO AJAX on the article. There's a lot of Javascript, perhaps something that you might refer to as DHTML, but no AJAX. - podgey22, on 10/12/2007, -2/+19If Digg dumped scriptaculous in favour of mootools they could replace their 260k of scripts with (probably) about 30k of mootools (no joke).
That's 1gigabyte of bandwidth per 4000 visits.
They could replace 26 requests to the server with 1. That's would drop 100,000 requests per gigabyte saved (4000 users again).
Can you just imagine how much healthier the servers would be? Digg would fly without all that useless traffic.
Extrapolating out, going on the figure that Digg gets about 1.3million visitors a month, they could be saving 285gigs of traffic and their servers would have to deal out 28500000 fewer requests... Per month. That's cutting 11 requests per second. - timdorr, on 10/12/2007, -0/+8I'm more of a Jquery guy myself. http://jquery.com
It's 20K, I believe, and does a *lot* of stuff. The selectors are more in-depth than Mootools and the syntax is more compressed than both Scriptaculous and Mootools. I fiddled with Mootools, but it's still very much under heavy development. It can definitely get there, though. No doubt about that.
Also, if you want a good example of why Jquery is so great, here you go: http://jquery.com/blog/2006/10/18/zebra-table-showdown/
I actually created my own sortable list using just some Draggable and Droppable elements with the Interface library: http://interface.eyecon.ro/ I have a hierarchal list to deal with, so the built-in Sortables doesn't cut it in either Jquery or Mootools, but it's actually just a few lines of code to do it manually. - timdorr, on 10/12/2007, -1/+2Oh, and it's actually 194,224 bytes if you want to be a stickler about it. That's the size of the Scriptaculous library files and the Prototype library that's required to run it.
If you compress it, you can get Prototype down to 26,300 bytes and 49,097 for Scriptaculous. So, 75,397 bytes in total with compression. Still about 45KB on top of Jquery :) - AegisGFX, on 10/12/2007, -0/+14I hate to tell you this, 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 is esentially communicating with a server or database without reloading the page, and simply adding javascript effects to your website will bring you no closer to having AJAX on your site. - jonhohle, on 10/12/2007, -2/+0have you ever tried upgrading mootools? i inherited an app where mootools was used and figured I could drop in the latest versions, like I can with scriptaculous. oh wait, they completely changed the interface. not real happy with moo.fx
- ElectricGrandpa, on 10/12/2007, -2/+3"Ajax is a MUCH harder beast to tame and is esentially communicating with a server or database without reloading the page, and simply adding javascript effects to your website will bring you no closer to having AJAX on your site."
Um, AJAX is included with Scriptaculous(through prototype)... And it IS easy... Everyone acts as if AJAX is some hard thing to do, but it's super easy and simple... - podgey22, on 10/12/2007, -1/+2>>have you ever tried upgrading mootools? [...] not real happy with moo.fx
Mootools != Moo.FX
If you're talking about moving from release to dev-trunk builds, yeah because they don't put every class in the trunk builds, but the problem you had there is Mootools is pretty incompatible with MooFX. Mootools was designed later with hindsight from the moofx project. Mootools should be more stable to upgrade now but there may be some points (major versions) where a syntax changes... - metric152, on 10/12/2007, -0/+2AJAX has now become simple because of the new frameworks out there like jQuery, Prototype, dojo, etc.
It's not super easy when your starting from absolute scratch. It's nothing now because these people have put together a great product that allows programmers lives to be a little easier.
- strictnein, on 10/12/2007, -2/+3Go here for some real examples and info.
- 5ymb10t3, on 10/12/2007, -2/+19Note that the 140KB is actually the entire archive, including the documentation and all the extended options and other files. The script.aculo.us library itself is 4KB, which is smaller than many other javascript libraries.
- thatkidandy, on 10/12/2007, -2/+10love this, but moo.fx, http://moofx.mad4milk.net/, is a great, SUPER lightweight take off of Script.aculo.us (moo.fx is only 3kb)
- benplanet, on 10/12/2007, -3/+4I agree! I use moo.fx its super fast and tiny!
- emehrkay, on 10/12/2007, -1/+5both moofx and script.aculo.us are dependant on prototype.js. mootools isnt and it is very very nice. check it out
- soogy, on 10/12/2007, -0/+4moo.fx uses prototype.lite.js, which is even smaller than the regular prototype.
Nothing can touch Mootools though; I don't have to manually code everything anymore, it's so fast and simple to use. You have to be a moron to screw up anything with Mootools.
http://mootools.net/
When downloading it, you can pick what modules you want to use, and what level of compression. - genghisjuan, on 10/12/2007, -0/+0I just started using mootools and I can't believe how great it is. Super easy Ajax and javascript effects in one. I have no complaints. I recommend it to all my web dev friends.
- spargo, on 10/12/2007, -0/+12Just a little FYI, digg uses the Script.aculo.us library.
- raynar, on 10/12/2007, -14/+13would that be why its slow as hell?
- drepmoreh, on 10/12/2007, -1/+3They've implemented it really well here on Digg. The new version of Lightbox uses it too.
It's cool just messing about with Scriptaculous. You should try the fade out function on the whole body triggered by a click on a simple link. Never fails to amuse me.
It's something that I can't imagine Jakob Nielsen would like however........ - spargo, on 10/12/2007, -2/+10The Script.aculo.us you see on digg is the sliding up and down of comments, as well as what happens when you digg or bury something. The old digg number fades out, registers with the server, and the new one fades in. The comments use the effects SlideUp and SlideDown.
- nunbot, on 10/12/2007, -1/+13@raynar
had to digg you down just to see it in action :P
- merreborn, on 10/12/2007, -0/+7"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."
That's not AJAX. AJAX has a server side.- spargo, on 10/12/2007, -3/+6@merreborn
You are very correct. Script.aculo.us can do AJAX, however this tutorial is simply demonstrating normal javascript effects. This is just the "J" part of AJAX. - soogy, on 10/12/2007, -1/+7The J part of AJAX means JavaScript parsing the server response. It has nothing to do with effects.
- centic, on 10/12/2007, -0/+13People referring to AJAX as any cool effect in Javascript is incredibly annoying.
- kevdotbadger, on 10/12/2007, -2/+0Yeah, title is crap. Nice 'how-to' for the beginners wanting to add some effects to their pages.
Script.aculo.us is a decent lib, in my time I've used both JQuery and Moo. I think can say without any doubt that Script.aculo.us is the best lib (mainly because I've grown a custom to it through my RoR dev'in.) - spargo, on 10/12/2007, -3/+1AJAX altogether stands for "Asynchronous JavaScript And XML". The simple effects in this tutorial show no XML, and nothing synchronizing.
- evolseven, on 10/12/2007, -2/+3I think you are semi mistaken.. ajax requires a server side as much as xhtml requires a server side to serve up the data.. the xml does not have to be dynamically generated and can just as easily be a static xml file manipulated by javascript..
- Huevoos, on 10/12/2007, -0/+2@ Spargo
In fact scriptaculous don't do any AJAX, it's all done by the underlying Prototype lib - laceration, on 10/12/2007, -1/+2Ajax is using the XMLHttpRequest object. Gee-whiz javascript effects are not Ajax. ...and the size thing, what an ignorant article. I guess the author got to buzz about the Ajax buzz. Buried as inaccurate.
- spargo, on 10/12/2007, -3/+6@merreborn
- noah45, on 10/12/2007, -4/+4Nice.resource...I.tried.to.get.these.effects.working.a.couple.weeks.ago.but.found.the.official.site.to.be.of.no.use.
- kevdotbadger, on 10/12/2007, -3/+4Maybe you're adding too many periods? Try following this tut and I'm sure you'll get it working.
- merreborn, on 10/12/2007, -1/+14Dude, if your spacebar is broken, you can pick up a new keyboard for $5.
- jongens, on 10/12/2007, -0/+8my 65 year old dad separates his sms message text with periods, because he does'nt know how to add spaces.
dad?
- remiprev, on 10/12/2007, -0/+1This is a good tutorial to achieve Javascript effects. It has nothing to do with AJAX at all.
- shark615, on 10/12/2007, -1/+1There are several AJAX parts to the the lib. Check Autocomplete for the best example so it is relevant
- jon3k, on 10/12/2007, -1/+1Yeah except for all those functions for manipulating and working with the DOM. Yup, absolutely nothing to do with AJAX. Much like a browser has nothing to do with AJAX I guess.
- dpreacher, on 10/12/2007, -1/+0i agree with merreborn...since i've been thru the scripts...AJAX would require client-server communication. probably what the article digg'er means is that you can use all the cool effects on an AJAX-driven webpage.
- tuartboy, on 10/12/2007, -1/+5Since when is 140k tiny? Especially when broken up into like 8 requests.
- jon3k, on 10/12/2007, -2/+2That's the entire package. The components actually required for it to function are like 4k, which, for the functionality, is pretty impressive.
- Jugalator, on 10/12/2007, -0/+4"Follow these steps to AJAX up your site"
Ugh... That terminology almost gave me the shivers, especially when the submitter isn't talking about AJAX, but Javascript. - x3nos, on 10/12/2007, -3/+2Too often things like Web 2.0, AJAX and Semantic Web are used to inaccurately describe newer web technologies when they have nothing to do with those terminologies.
Buried. Inaccurate. - Bdog2g2, on 10/12/2007, -0/+2Although somewhat bloated YUI and YUI-ext are very nice javascript libraries/frameworks. Nice cross browser support
http://www.yui-ext.com - nlogax, on 10/12/2007, -0/+3Please don't follow those examples. Inline JS (and CSS) is ugly, keep the scripts external and use the DOM and event handlers to add stuff to your site, while keeping it fully functional if JS is not available.
- dnite, on 10/12/2007, -1/+2ya. burried inaccurate just for annoyance of calling scriptaculous AJAX. scriptaculous depends on the prototype javascript library. Prototype will let you 'AJAX up your site', but it has nothing to do w/ neat fade effects or anything like that.
Get it right people! AJAX != Pretty_Effects!! - Zwirko, on 10/12/2007, -2/+1Great ... more folks will be rushing to use stuff they don't need.
I wonder what is (was) worse ... crummy animated gifs, Flash overload or the AJAXification of the web.
Stop and ask "Do I really need this?" ... please.- spargo, on 10/12/2007, -0/+1@Zwirko
AJAX has many benefits and is practical for many applications where Flash overload and crummy animated GIFS aren't. AJAX builds a better end user experience, leaning as much as possible towards the feeling of a desktop application. It also can greatly decrease bandwidth with a request using as little as less than 1kb compared to loading an entire other page which could easily be over 100kb or more. - jon3k, on 10/12/2007, -0/+2@spargo
That same argument works for flash too. Let's all just agree that any technology can be implemented poorly and move on.
- spargo, on 10/12/2007, -0/+1@Zwirko
- kristoferbaxter, on 10/12/2007, -2/+31) "It’s 'Ajax', not 'AJAX'" - Ajaxian.com
2) Script.aculo.us is a great extension to Prototype despite is large download size. Remember a good developer will simplify the release version on their site to the functions they need.
3) Mootools this, mootools that. Sounds like people haven't been studying its core and learning about its weaknesses (yes it has quite a few, including major problems with memory consumption on IE6).- jon3k, on 10/12/2007, -4/+2@kristoferbaxter
1. Please do not even propose to correct the capitalization of a ***** acronym you snooty bitch. You exemplify the typical ajaxian.com visitor to a "T".
2. The actual library is only about 4K.
3. Wow, memory consumption problems in IE? NO WAY!!1 - kristoferbaxter, on 10/12/2007, -0/+2@jon3k
Wow. I seem to have hit a nerve. Please allow me to clarify.
1) Yes its Ajax. I know that this seems counter to the fact that it is an acronym, but I didn't choose the term. I am simply the messenger. (Personally I use JSON more than XML, so I don't even agree that the X belongs there)
Reference: http://www.adaptivepath.com/publications/essays/archives/000385.php
2) Yes its 4k for some parts, not all. And there is the prototype library to load as well. Please again refer to my post, I said a good developer will strip this for a final site - so some cases might be 4k, others well... much larger. This is not a huge bash against this library.
Reference: This page. Which loads 47Kb for prototype, 35kb for effects.js, 23kb for dragdrop.js, 20kb for controls.js, and 8kb for slider.js
3) Yes we all know that IE is quite a pain to develop for. But, we all share that burden. The world uses IE and we have to cater to that. So, carefully examine what you are doing in IE to cause the memory leaks and do your best to minimize them. That's all one can ask.
Reference: http://www.google.com/apis/maps/documentation/#Memory_Leaks
Lastly, do not take my comments as attempts to be rude. I can tell you are very vocal on this issue based on your commenting here, and that's great. We are on the same team, trying to make the web a more enriching experience. I just happen to disagree on some of the methods to do so.
- jon3k, on 10/12/2007, -4/+2@kristoferbaxter
- zigman91090, on 10/12/2007, -0/+4No matter what it is, it's a nice article.
Dugg - icexe, on 10/12/2007, -0/+1since when did DHTML effects become AJAX? did i miss that meeting? no callbacks = no AJAX
- Nick22, on 10/12/2007, -0/+1I was searching for a AJAX framework a few weeks back and came across script.aculo.us....couldnt figure out where the hell the ajax was!
People need to learn the different between DHTML/Javascript and AJAX. - mikekol, on 10/12/2007, -1/+7"How to easily AJAX your site" doesn't quite sound right.
Can we call it AJAXulate? - sonofagunn, on 10/12/2007, -0/+1Personally, I think it's a better idea to not include a Javascript library just to get some cool effects on your site. Either write what you need yourself, or (if you can't figure out how to write it easily and quickly) download one of the frameworks and take only the code you need for the specific effect you need provided their license allows for ripping off the code like that.
Good web design includes limiting download size. These all-in-one libraries are bloat unless you use every feature in them on every page in your site.
Plus, they're undoubtedly going to grow as time goes on, and will almost certainly be a hassle to upgrade - and at some point you'll be forced to upgrade to remain compatible with some new browser version somewhere.- jon3k, on 10/12/2007, -2/+2Please keep in mind that's the entire download. The library itself is only 4K.
- abyssknight, on 10/12/2007, -0/+1Anyone that calls this tiny needs a reality check. A site should NOT be more than about 50kb to load. You can get away with 100kb now, with the growing spread of broadband and true 56k access. (Yes, sounds dark ages but people still use dial up.)
Moo Tools is just as feature filled, and much more efficient in size.
Moo Tools actually lets you choose what components you include as well, at download time. I'm not evangelizing, I'll use whatever is best and has the smallest footprint. Besides, AJAX is not what this is anyways. This is a bunch of effects attached to an AJAX library, prototype.
Prototype is the library you're looking for, in either case (mootools/scriptaculous). - 5ymb10t3, on 10/12/2007, -0/+1script.aculo.us DOES have callbacks, but they are a bit more advanced, so they aren't covered in this article. Whether or not it is true AJAX, you can still get some great results and do some neat things with it. For the web developer who is just starting out or someone who doesn't have the time to hack custom javascript code every time something comes up, script.aculo.us is nice to work with. You can tell it to include only the features you want to get faster loading times, but it isn't really necessary.
- jesirose, on 10/12/2007, -4/+1Mootools > *
mootools.net - Zwirko, on 10/12/2007, -0/+1@sprago
I know what AJAX is and what it can do.
That is the whole point of my comment. Many folks are using AJAX simply because they feel it is the latest thing and they MUST use it or be left on the scrap heap. It's being used where its not needed in many instances.
As the other dude said "technology can be implemented poorly" ...- icexe, on 10/12/2007, -0/+2great point. think of what happened with Flash a few years back, everyone jumped on the "me too" bandwagon with mostly horrid results. Flash quickly got a very bad rep. Heck, this is what DHTML did to javascript back in the late 90's, it took years for anyone to take javascript seriously again. Let's not take another good idea and cliche it to death again. Just because you can do a thing, doesn't mean you should, people.
- alteratti, on 10/12/2007, -4/+3it takes just one javascript related digg..
..to get all the javascript geeks making a big deal out of it in the comments
!! ATTENTION GEEKS !!
Kevin might be taking tips from here,
so be extra geeky and explain everything you say,
you never know, he might just hire you from here! - Thundermutt, on 10/12/2007, -1/+0While I'm in favor of anything that promotes easy learning of Javascript (I'm a jquery guy), it's correct that this article isn't really about Ajax, and really, that's not what Script.aculo.us is for. It's for effects. But if you DO want to learn basic Ajax, a framework like jquery or prototype is the best way to get started.
- 5ymb10t3, on 10/12/2007, -0/+3Script.aculo.us also does a lot of other AJAX-like callback stuff, like InPlaceEditor, InPlaceCollectionEditor, and Autocompleter. This tutorial barely scratches the surface of the capabilities of it. I have been building entire sites out of it, they load fast, and it works great cross browsers. Script.aculo.us is powerful enough to build entire database-driven applications out of with very few lines of code. Say what you want, but it is easy, powerful, and great for beginners.
- stockjones, on 10/12/2007, -1/+0jquery is my fav. and this isnt really ajax but you can do ajax stuff with jquery or Script.aculo.us
- thoand, on 10/12/2007, -0/+1jquery.
- SpeKopuZ, on 10/12/2007, -0/+1it's something you can get from the home page of scriptaculous, but i digg this because scriptaculous is very cool ;) and useful.
- ajaxguy, on 10/12/2007, -0/+0really, it's a cool article ..
www.ajaxlines.com - xeno439, on 10/12/2007, -0/+1That is a nice article. You can find other AJAX scripts here at http://www.sickscripts.com
- batfastad, on 01/19/2008, -0/+0Buried because the article's got nothing to do with AJAX. It's only describing one of the dHTML effects of Scriptaculous/prototype.
Digg is coming to a city (and computer) near you! Check out all the details on our 
© Digg Inc. 2008 —
Content posted by