Javascript Sliding Panels - Starting the Panels Up
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.
Posted in Javascript, All Tutorials by The Reddest |
June 22nd, 2008 at 7:55 am
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
July 18th, 2008 at 5:32 pm
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));
July 18th, 2008 at 5:36 pm
Forgot to mention that I also had to put the examplePanel before the exampleHeader, so that the examplePanel rested on top. Thanks again!
July 29th, 2008 at 5:14 pm
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!
August 5th, 2008 at 12:44 pm
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?
August 29th, 2008 at 9:38 am
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.
August 29th, 2008 at 10:17 am
http://blog.paranoidferret.com/index.php/2007/08/08/javascript-sliding-panels-using-generic-animation/
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.
September 14th, 2008 at 1:46 pm
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.
October 29th, 2008 at 10:00 pm
Assumes fixed height.
November 12th, 2008 at 6:56 pm
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.
November 12th, 2008 at 6:57 pm
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’;