Adding slick slide and fade effects

Over at Maxpower, Kirk Montgomery wrote a nice ‘How To’ post that dealt with adding a tabbed navigation to the sidebar of K2/Wordpress, similar to that done on the AlwaysBeta site. To quote Kirk, he says “they have incorporated some slick slide and fade effects — to savy for this guy”. Well here is my contribution to this how-to - yet be warned, this is probably down and dirty code…but it works. As I always say I can’t code to save my life I just copy/paste what others do.

First you need to surf over to script.aculo.us and download their javascript libraries.

Second I think that the DomTab referenced in Kirk’s post seems to be a bit of an overkill for the job that is expected. So i’ll try to make it simpler…I think.

The following has been tested on the following configuration:
- OSX / Safari
- OSX / Firefox
- WinXP / Internet Explorer

If it does not work on your setup, chances I cannot do much about it.

The basic idea here is that we want to offer a user, ‘Tabs’ to navigate through a section of your site. You want every click on a tab to load some content in a <div> tag. Yet you only at anyone time want to see the content of one tab in your browser. (you still with me?).

In javascript I can make all the <divs>’s on my page disappear, but you don’t want to do that (because that would probably hide your whole page). I can also hide only one <div> but again that is not what I want to do (I don’t know which tab is active and therefore need to hide them all).

So, I took the road less travelled (or the easy way out, whatever you want to call it). I’ve added a function that hides all the <div>’s of my tab contents (naming each and everyone of them - which is OK because you would’nt have a zillion tabs anyway).

This example assumes that there are 4 tabs. What it does, is that it hides all my <div>’s that have an id="tab1" (tab2, tab3 and tab4 remember we have 4 tabs)

function hidem()
{
document.getElementById('tab1').style.display = "none";
document.getElementById('tab2').style.display = "none";
document.getElementById('tab3').style.display = "none";
document.getElementById('tab4').style.display = "none";
}

Now we need a function, so that every time I click on a tab, it will
1) hide all my <div>’s and
2) display the <div> that corresponds to the tab I clicked…and this of course has to be done using a slick slide effect.

To do this we have this function (this code was largely inspired from this article)

function show(l)
{
hidem();
var id=l.href.match(/#(\w.+)/)[1];
new Effect.BlindDown(document.getElementById(id),{duration:1.0});
}

Note that I’m first using the function hidem() to hide my <div>’s and then on the last line I use a BlinDown effect to slide in my <div>.

Both these functions have been added to a separate file called magic.js and not included in the main script (but that is my choice).

Now that I have my functions, here is how I call them:

<ul id="mainnav">
<li><a href="#tab1" onclick="show(this);">Tab 1</a></li>
<li><a href="#tab2" onclick="show(this);">Tab 2</a></li>
<li><a href="#tab3" onclick="show(this);">Tab 3</a></li>
<li><a href="#tab4" onclick="show(this);">Tab 4</a></li>
</ul>

Every time I click on a tab, its going to call the fucntion show() which itself calls the function hidem().
To finish it off this is what the content of the tabs could be. The content does not have to be static html, it could come from a PHP code.

<div id="tab1">Tab 1 - content of tab1 ...</div>
<div id="tab2">Tab 2 - content of tab2 ...</div>
<div id="tab3">Tab 3 - content of tab3 ...</div>
<div id="tab4">Tab 4 - content of tab4 ...</div>

Note that for every <a href="#tabX"... call I have a corresponding <div id="tabX....

You can see this code in action here. Feel free to take it and make it better. You’ll also see that there is no css data in there (except for a couple of <div> properties) - that’ll be for another post.

I welcome your comments, so feel free to make them.

Posted in Wordpress | Published on March 7th, 2006