« Previous
Next »

Sliding Ajax Shelf: The Code [Revived]

After I wrote my basic primer to Ajax (see Ajax Primer), I found that a lot of people were searching on Google for a simple guide that shows exactly how the sliding shelf effect is achieved. So, without further ado, I will provide the code and method used to create a shelf with whatever content you’d like.

How is this different than other methods out there?

The shelf effect I use on my site is achieved using the moo.fx javascript library. Although I’m certainly not the first to use it for a WordPress shelf (see the Asymptomatic tutorial), my scripting is not exactly the same as the ones I’ve seen so far. This may prove useful to a handful of people who might have had difficulty with other methods.

Please note that this article has been pulled from the archive and was originally posted August 1, 2006. Thus, it may not be up to date or fully accurate any longer. To better understand why, please read this relevant post.

First, the files!

Again, the javascript library used is MooTools.

The version of moo.fx.js above is slightly bigger in file size as I added a little custom scripting of my own to be able to load external content via Ajax.

Loading the Code

You’ll want to add the js files between the <head> tags. To do this, add this little bit of code:

<script src="“/js/prototype.lite.js”" type="“text/javascript”"><!--mce:0--></script>
<script src="“/js/moo.fx.js”" type="“text/javascript”"><!--mce:1--></script>
<script src="“/js/moo.fx.pack.js”" type="“text/javascript”"><!--mce:2--></script>

Just don’t forget to change the directory structure to fit your own site.

Initialize the Variables

Now you’ll want to call and define the variables used to create the effect. Just copy and paste the following into your header between the <head> tags as well.

<script type="text/javascript"><!--mce:3--></script>

If you’d like, you can rename the function from stretch to whatever you want.

Add the Content

Next, create add whatever you’d like to show/hide inside <div> tags as follows:

<div id="“stretch”"> —Content Here—</div>

Place this wherever you’d like to have your shelf - I put mine right after my <body> tag so it pushes the page down when called.

Make a Link

To call on the effect from a link or button or whatever you’d like, add onclick=”stretch.toggle();” to any link(s). Of course, here is an example link you can just copy and paste into your template.

<a onclick="“stretch.toggle();”" href="“javascript:;”">Access Shelf</a><a></a>

I added the javascript:; bit to make the link null, of course you can also use # to achieve the same effect.

Hide the content initially before the Javascript loads

When using this method, the content has a tendency to display in the browser for a split second before becoming hidden with the stretch.hide() function. I think this is due to the hide effect being loaded after the main javascript loads, which can take time depending on the filesize of your page.

Regardless of the cause, it can be fixed with a little CSS hack:

<a>stretch{
height: 0;
overflow: hidden;
 
}
</a>

Just as a reminder, be sure to change ’stretch’ to whatever you’ve made your content ID.

It’s not Ajax yet

In all honesty, what we have so far is javascript making content that’s present on the site look fancy. Ajax stands for Asynchronous JavaScript and XML, and is a method for dynamically calling content as a background process.

Don’t worry though! This can be applied to the shelf we’ve just created. Do you need it? Certainly not, but if your shelf is really big or is not used that often, you could make the user call it after he/she clicks the link.

To call an external file in your shelf, truly making it an Ajax shelf, we use an additional Javascript resource - moo.ajax.js. Download this file and call it in the header just like the other javascript files. If you’d like, you can view the source of all of your javascript files and combine them into one file, but that’s up to personal preference.

Anyways, using the new moo.ajax.js library gives us an important function. Now you can externally load any file you’d like in a DIV or SPAN. The code is pretty self-explanatory:

<script type="text/javascript"><!--mce:4--></script>

Like before, add this to the head section of your page and change the values to suite your needs. Now your shelf has truly been Ajaxified!

Using Cookies to Remember the Height

As long as you are including the moo.ajax.js file, you can also use moo.fx’s built-in cookie system that can remember whether or not the hidden section is open or closed. This adds the ability to have the shelf open or closed even after refreshing the page.

This code uses the fx.RememberHeight function:

<script type="text/javascript"><!--mce:5--></script>

The variable myRememberHeight can be anything you’d like to call it and the ’stretch’ should be the same as what you’ve set your <div> id value to. You can call this function just like the last example:

<a onclick="“myRememberHeight.toggle();”" href="“javascript:;”">
Access Shelf </a><a></a>

If you want to use a <div> section or button as a link, you can do so by adding the following to your javascript code:

<script type="text/javascript&gt;&lt;!--
window.onload = function() {
//remembers the height with a cookie
myRememberHeight = new fx.RememberHeight(’stretch’,
{duration: 300});
myRememberHeight.hide();
$(’myButton’).onclick = function() {
myRememberHeight.toggle();
};
};
// --&gt;&lt;/mce:script&gt;
&lt;/pre&gt;
&lt;p&gt;This essentially does the same thing as placing &lt;code&gt;onclick&lt;/code&gt; in the anchor tag, but is called using:&lt;/p&gt;
&lt;pre lang="><!--mce:6--></script>

What can you use this for?

There are many practical uses of the shelf system for your business or personal blog. Some that I have seen before include, but are not limited to:

Well, that’s all for now. I haven’t had a chance to re-do my steps yet, so please leave a message if there are any errors. If you find this article useful, please leave a comment.

« Previous
Next »
Written by Monji
Web Design Tips

You can receive our articles for free in your email inbox, with more web design,
SEO, monetization, marketing and blog tips. Just enter your email below:

One Response - Share Your Thoughts

Trackbacks

  1. Sliding Ajax Shelf: The Code « Rich Internet Applications

Leave a Comment