I know we've done sliding panels in the past - in fact we've done it twice (here and here), but one comment that appeared a couple of times was the desire to start the panels in the up position. In this tutorial, I'm going to demonstrate how to create a simple sliding panel that starts in the up position and slides down when the user clicks a header above the panel.
The animation code I'll be using in this tutorial is our Generic Animation code. I would highly recommend reading that tutorial if you want some detailed information on how the animation actually works. In this tutorial, I'm going to stick to just showing you how to use the generic animation code to slide the panel.
Here are the panels we're going to be building today:
|
Click Me
Content
|
Click Me
Content
|
Click Me
Content
|
Thanks to version 2 of our generic animation code, building these panels is easier than ever. Let's start with the HTML for building one of the panels.
<div style="position:relative;
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader"
style="position:absolute;
width:150px;
height:20px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="runAnimation(animationObject, this)">
Click Me
</div>
<div id="examplePanel"
style="position:absolute;
width:150px;
height:0px;
top:20px;
left:0px;
background:#a6bbcd;
overflow:hidden;">
Content
</div>
</div>
This is a very basic sliding panel. One div to hold everything, one div for the header (exampleHeader), and one div for the panel that actually does the sliding (examplePanel). Now we need an animation object that will slide our panels.
animationObject.AddFrame(new AnimationFrame(0, 20, 150, 130, 500));
Here we create an AnimationObject, which is from our generic animation code. We then need to add a frame to the object. You can add as many frames as you want, but since I just want the panel to slide down, one frame will do.
The AnimationObject has the ability to change both size and position. Since I don't want the panel to move, I set the first two arguments to the panel's original position (0, 20). I also don't want the panel to change width so I keep the third argument 150. I set the fourth argument to 130, since I want the panel to change height from 0 to 130. The last argument is how long the animation should take - in this case 500 milliseconds.
Now we need to create the function, runAnimation, that is called whenever the header is clicked.
{
if(header.animationObject)
{
animation.RunBackward();
header.animationObject = null;
}
else
{
animation.RunForward();
header.animationObject = animation;
}
}
I made this call as generic as possible so if you have more than one panel they could all just call the same function. It needs to take in the AnimationObject and the header that was clicked. We need to keep some sort of state so we know which direction to run the animation. I simply create a variable in the header element to hold the animation object. If the animation object is not null, run it backwards, if it is null, run it forward. The ability of the AnimationObject to run forward and backward greatly reduces the complexity of the sliding panel code.
Putting all the code together, you'll get something that looks like this:
<div style="position:relative;
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader"
style="position:absolute;
width:150px;
height:20px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="runAnimation(animationObject, this)">
Click Me
</div>
<div id="examplePanel"
style="position:absolute;
width:150px;
height:0px;
top:20px;
left:0px;
background:#a6bbcd;
overflow:hidden;">
Content
</div>
</div>
<script type="text/javascript">
var animationObject = new AnimationObject('examplePanel');
animationObject.AddFrame(new AnimationFrame(0, 20, 150, 130, 500));
function runAnimation(animation, header)
{
if(header.animationObject)
{
animation.RunBackward();
header.animationObject = null;
}
else
{
animation.RunForward();
header.animationObject = animation;
}
}
</script>
The Javascript code has to be executed after the HTML has been displayed, otherwise the elements that are passed into the AnimationObject won't exist. A good place for this would be in the document OnLoad event handler, but for simplicity, I just put it after the HTML code.
Hopefully this tutorial cleared up any details about creating a sliding panel that starts in the up position and slides down. If there are any comments or questions, leave them below.
06/22/2008 - 06:55
Hello,
Excellent tutorial. I was about to jump straight in and use your ideas but I have one stumbling block (as would be the case). My divs have a variable height, i.e. unknown!
Do you know of an approach to sliding divs when the height is unknown?
Thanks
11/12/2008 - 17:56
Excellent script i was just browsing trough it, saw that someone asked what if you want variable height? So i thought Ill try and help.
Basically what you need to do is set the div elements height property to auto so that you can pick up the height, like so:
document.getElementById('examplePanel').style.height = 'auto';
then pick the height up with this code:
var WH = document.getElementById('examplePanel').offsetHeight;
then instead of a fixed number as the animation height value use your variable, in my case WH.
Best wishes, Ilija.
11/12/2008 - 17:57
p.s. dont forget to return the height value to its previous value before animating, in this case 0px so:
document.getElementById(’examplePanel’).style.height = ‘0px’;
07/18/2008 - 16:32
Thank you for the great scripts! I was able to modify the call to AddFrame() to "expand up" rather than down by setting the HTML style of examplePanel1 to "top:150px; height:0px" and the javascript call to, examplePanel1.AddFrame(new AnimationFrame(20, 0, 175, 150, 500));
07/18/2008 - 16:36
Forgot to mention that I also had to put the examplePanel before the exampleHeader, so that the examplePanel rested on top. Thanks again!
07/29/2008 - 16:14
First off all it's a great tutorial very wheel explained but there is no discussion about one thing in any of the three sliding panel tutorials.
Let's say that we need 3 panels one under the other. When the 1st one is closed haw can i do to make the 2nd and 3rd panel come up...so the space required for one panel will not remain empty.
Thanks for the tutorial!
08/05/2008 - 11:44
Thanks for all of your hard work on this. The content area is visible in IE 7. Is there any way to tweak this to make it invisible in IE 7?
08/29/2008 - 08:38
I'm looking to implement something just like this except the bar will start vertical and expand from right to left (in the negative direction). Is this do-able through simple code manipulation? Or would it require a new build based on your other generic animation script (I'm fairly new to javascript and just beginning to muddle my way through) Thanks in advance for any help you can offer.
08/29/2008 - 09:17
Sliding Panels Using Generic Animcation
The above tutorial shows a couple of different ways to slide the panels, including the one you're looking for. You'll have to combine that one and this one to get your desired result.
09/14/2008 - 12:46
I've tried all of these panel demos, and am running into major problems. In short, they're not working. IE6. I don't think it's a browser issue because all the examples work on these pages, just not on mine. If I had to pinpoint a particular issue, it would be that the panel only retracts as far as the content inside the panel - meaning it's most likely an overflow issue. Should there be some CSS tags? This particular panel tutorial only runs once on mine - you can click and it drops down, you can click and it retracts, then it doesn't respond.
10/29/2008 - 21:00
Assumes fixed height.
01/01/2009 - 06:47
where can i get genericAnimationV2.js?
Anybody knw?thanks for the help.
01/02/2009 - 10:48
You can download it here. I guess I should have posted a link somewhere in the tutorial - sorry about that.
08/17/2009 - 02:21
Hey Reddest..
Nice script.. :)
Tried running it.. Its displaying the content in IE7. Any workarounds for this... ??
08/21/2009 - 09:04
Hi
First of all I want to say this is a great tutorial.
But when I tried to get it to work I ran into a problem.
My problem was that I could only do the animation once (one time forward, one backward) and then it was broken.
After going through the code I found the problem.
In this piece of code, header is given as "this" in the onclick call in the div.
{
if(header.animationObject)
{
animation.RunBackward();
header.animationObject = null;
}
else
{
animation.RunForward();
header.animationObject = animation;
}
}
The problem seems to be that "this" is in my case for some reason the html document. Because when the above code calls
What it does is set my global animationObject to null.
This makes it disappear and it cannot be used again.
I think I am doing something wrong which makes header.animationObject and the global animationObject point to the same thing. I could have fixed that but to prevent it from happening I simply edited the runAnimation function.
The new lines are:
if(header.check) {
alert("back");
animation.RunBackward();
header.check = false;
}
else {
alert("forward");
animation.RunForward();
header.check = true;
}
}
11/13/2009 - 03:21
Thanks alot! This was exactly what i was looking for.
I'll post some credits to this from my site ;)
Again: Thanks alot! Great to use, had no problems. And also easy to customize! What more can a man wish for?