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:- 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!
So, just how good at time waster games are you? Think you've got the stuff? Well, The World's Hardest Game 2.0 doesn't think you do.
Yes, amazingly, it's possible to have a sequel to a game called "The World's Hardest Game". It doesn't seem logically possible, since if the first one was actually the world's hardest, how could another one come along and share the moniker? It made me doubt the name in the first place. That is, until I tried the game.
The mechanics of the game are very simple. You are a small red square, ...
