Supery dupery pull-out's with Prototype and Scriptaculous.

Nuvo

Hello minions.
If you've worked with AJAX, or even just the DOM, you'll know that JavaScript (or EMCAScript to be picky) can do a fair bit when it comes to tweaking how a page looks in real time as it runs on the client side.

Now, if you've wanted to make AJAX easier to use, and have wanted better looking effects from it, chances are that you've run into both Prototype and Scriptaculous at some point.
Prototype is designed to make AJAX easier to use while Scriptaculous is an add on to Prototype which allows for many pretty effects.

Some sites, such as superfluousbanter have used these two JavaScript libraries to allow for stylish hidden sections which are shown when you make use of pull tabs (links that say something like "Pull me" and look like tabs).
This isn't overly hard to do with these two libs, so here's how to do it:

Getting what should be got:
Go to http://script.aculo.us/ and grab scriptaculous from the download page.
The download should include Porotype as well as scriptaculous, so you're all set in terms of JavaScript files.

Setting up:
Unpack the archive and copy the files to the directory you're working in (I have these in <appdir>/javascripts/ or something like that) and open your editor of choice.
I'm not going to go into building much HTML as you should know how to do that by now, so I'll stick to what's needed.

The code, the code:
Firstly, we're going to have to get both libs hooked into our document using something along the lines of:
[html]
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
[/html]
In the head section of the document.
By default, loading scriptaculous.js loads all the other files, but you can load them on their own if need be.

Now, we need a div.
This div should look something like this:
[html]
<div style="display: none; background: #ebebeb; padding: 2px;" id="pullout">
This is where my content is!
</div>
[/html]
The important parts here are that it's display attribute is set to "none" and it has an ID of "pullout" (the ID can be different, but it's used in the JS code, so that will need to change as well).
Fair enough, we have our pull out, but how do we access it?
Well, that's where our tab comes in.
This can be a basic link or an image, but for now, a link will do.
add the following to the page just under the hidden div we just built:
[html]
<a href="#" onclick="Effect.toggle('pullout','blind',{});; return false;" title="Pull for more fun!">Pull me!</a>
[/html]

Now, when you click on the link, it'll trigger the effect, which is basically saying "if 'pullout' isn't displayed, then show it with a pretty effect, or hide it if it's visible", which looks neat.

Breaking it down:
<a href="#" tells the browser that it's not going anywhere as the sharp \ hash \ gate symbol is usually used for inline bookmarks, so no reffresh is done.
onclick="Effect.toggle is telling the browser that when you click the link, it should fire the effect, which is a toggle effect (meaning it can show or hide the element).
'pullout','blind',{});; return false;: What you need to look at here are the first two parts.
The 'pullout' section relates to the ID for our DIV, so change this if your DIV has a different ID.
The second part is telling scriptaculous what effect to use for the element changes.
Using blind will scroll from the top or bottom without the content moving during the animation, slide will look similar to blind, but the content moves with the element and appear fades the whole element in and out of sight, but may not be as smooth with resizing or moving of other elements on screen..

It's important that you set the display attribute of the pullout DIV as it will otherwise be displayed and clicking on the tab will hide it.
If this were using AJAX to load something like a preview (speaking from experience with Rails here), forgetting to set the display attribute would look buggy as the element would be hidden when you first click the link that should show it.
This is because scriptaculous uses the current display attribute to determine wether it should show or hide the element, and if no value is set, it takes that as it being visible.

In Rails, the code needed to make this go would be:

<%= link_to_function 'Pull me!', visual_effect(:toggle_blind, "pullout"), :title => 'Pull me!.' %>