Javascript Sliding Panels using Generic Animation
In this tutorial, we're going to combine the original tutorial on
Sliding Panels with our new
tutorial on
Generic Animation.
Using our generic animation code, making sliding panels becomes
much easier. You can download the Javascript code for generic animation
here.
| For this tutorial, I'm going to show how to make a few different types of sliding panels. Hopefully you'll have a good understanding of how to use the generic animation code to make all sorts of interesting and unique sliding panels by the end of this post. |
|
^^^
Content
|
Let's start with a standard vertical slider. In this example, when you click the header, the panel will contract and expand exactly like it does in our first sliding panel tutorial. |
<div style="position:relative;
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader1"
style="position:absolute;
width:150px;
height:20px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="slideExample1('examplePanel1', this);">
^^^
</div>
<div id="examplePanel1"
style="position:absolute;
width:150px;
height:130px;
top:20px;
left:0px;
background:#a6bbcd;
overflow:hidden;">
Content
</div>
</div>
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader1"
style="position:absolute;
width:150px;
height:20px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="slideExample1('examplePanel1', this);">
^^^
</div>
<div id="examplePanel1"
style="position:absolute;
width:150px;
height:130px;
top:20px;
left:0px;
background:#a6bbcd;
overflow:hidden;">
Content
</div>
</div>
There's nothing too special about this code. There's one div which just holds the header and the sliding panel. The next div, with the id "exampleHeader1", is the one that is going to be listening for the onclick event. I put the text '^^^' inside this div so the user has a visual indication of the state of the sliding panel. The div with the id of "examplePanel1" is the div that we will actually be animating. Now let's look at the Javascript code to make this panel slide.
function slideExample1(elementId, headerElement)
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 0, 20, 150, 0, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = 'vvv';
}
else
{
animate(elementId, 0, 20, 150, 130, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = '^^^';
}
}
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 0, 20, 150, 0, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = 'vvv';
}
else
{
animate(elementId, 0, 20, 150, 130, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = '^^^';
}
}
As you can see, the Javascript code required to make a sliding panel has been reduced significantly from our original tutorial. This is the function that is called when the slider's header is clicked. The first thing I do is get the sliding panel div element by calling
getElementById. I then check to see
which direction I need to slide the panel. I'm storing the state of the panel directly in the panel's
div element. If I haven't slid the panel yet (element.up == null), or element.down is true, I need to slide
the panel up. Otherwise, I need to slide the panel down. Thanks to the animate function provided by the
generic animation code, sliding the panel only takes one line of code.
The animate function takes the id of the element, the new left position, the new top position, the new width, the new height, the animation length (in milliseconds), and a callback function. So, to slide the panel up, I want to set the new position to 0, 20 and the new size to 0, 250. I want the animation to take 250 milliseconds and I don't want any function called when the animation is finished - so I set it to null. Next I set the state of the panel by setting
element.up to true and element.down
to false. Lastly I change the text in the header to 'vvv'.
To slide the panel back up, the animate function is called again with the panel's original position and size. Next,
element.down is set to true and element.up is set to false and
the header's text is changed to '^^^'.
|
<
< <
Content
|
Now let's look at a slider that's very similar to the vertical one but slightly more interesting. This sliding panel will slide horizontally from left to right when the header is clicked. |
<div style="position:relative;
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader2"
style="position:absolute;
width:20px;
height:150px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="slideExample2('examplePanel2', this);">
<<br /><<br /><
</div>
<div id="examplePanel2"
style="position:absolute;
width:130px;
height:150px;
top:0px;
left:20px;
background:#a6bbcd;
overflow:hidden;">
Content
</div>
</div>
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader2"
style="position:absolute;
width:20px;
height:150px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="slideExample2('examplePanel2', this);">
<<br /><<br /><
</div>
<div id="examplePanel2"
style="position:absolute;
width:130px;
height:150px;
top:0px;
left:20px;
background:#a6bbcd;
overflow:hidden;">
Content
</div>
</div>
The HTML code is nearly identical to the vertical slider code except for changing the orientation of the header and panel. I also changed the text in the header to a series of <'s. Let's see the Javascript code:
function slideExample2(elementId, headerElement)
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 20, 0, 0, 150, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = '><br />><br />>';
}
else
{
animate(elementId, 20, 0, 130, 150, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = '<<br /><<br /><';
}
}
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 20, 0, 0, 150, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = '><br />><br />>';
}
else
{
animate(elementId, 20, 0, 130, 150, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = '<<br /><<br /><';
}
}
This code is exactly the same as before except for the parameters passed into the animate function and the text in the header div. Instead of sliding the panel up and down we're sliding the panel left and right. So to slide the panel left we need to keep the position of the panel the same at 20,0 and resize it to 0x150. The animation will still take 250 milliseconds with a callback of null. To slide the panel right, just reset the size of the div to its original value - 130x150.
|
-
Content |
Now that we have the basic sliding panels out of the way, let's look at some more interesting ones. This panel will slide diagonally into the top-left square. |
<div style="position:relative;
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader3"
style="z-index:1;
position:absolute;
width:20px;
height:20px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="slideExample3('examplePanel3', this);">
-
</div>
<div id="examplePanel3"
style="position:absolute;
width:150px;
height:150px;
top:0px;
left:0px;
background:#a6bbcd;
overflow:hidden;">
<br /><br />Content
</div>
</div>
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader3"
style="z-index:1;
position:absolute;
width:20px;
height:20px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="slideExample3('examplePanel3', this);">
-
</div>
<div id="examplePanel3"
style="position:absolute;
width:150px;
height:150px;
top:0px;
left:0px;
background:#a6bbcd;
overflow:hidden;">
<br /><br />Content
</div>
</div>
Again, the HTML code is very similar to the previous example. Since the square sits on top of the sliding panel, I needed to set its z-index to 1 so it was not hidden behind the panel. I set the text in the square to '-', which is switched to '+' when the panel is slid in.
function slideExample3(elementId, headerElement)
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 0, 0, 20, 20, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = '+';
}
else
{
animate(elementId, 0, 0, 150, 150, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = '-';
}
}
{
var element = document.getElementById(elementId);
if(element.up == null || element.down)
{
animate(elementId, 0, 0, 20, 20, 250, null);
element.up = true;
element.down = false;
headerElement.innerHTML = '+';
}
else
{
animate(elementId, 0, 0, 150, 150, 250, null);
element.down = true;
element.up = false;
headerElement.innerHTML = '-';
}
}
This time we want the size of the panel to be 20x20 when it's slid in, which is the size of the top-left square. When the panel slides back out, the size is returned to its original 250x250. The text in the square is alternated between '+' and '-' depending on the state of the panel. Other than that, the code hasn't changed from the previous two examples.
|
-
Content |
The generic animation function has the flexibility to create some complex animations. Let's create a sliding panel that uses multiple motions to complete a slide. When the square is clicked, the panel will first slide left and then slide up. |
<div style="position:relative;
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader4"
style="z-index:1;
position:absolute;
width:20px;
height:20px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="slideExample4('examplePanel4', this);">
-
</div>
<div id="examplePanel4"
style="position:absolute;
width:150px;
height:150px;
top:0px;
left:0px;
background:#a6bbcd;
overflow:hidden;">
<br /><br />Content
</div>
</div>
width:150px;
height:170px;
top:0px;
left:0px;">
<div id="exampleHeader4"
style="z-index:1;
position:absolute;
width:20px;
height:20px;
top:0px;
left:0px;
background:#3b587a;
text-align:center;
color:#FFFFFF;"
onclick="slideExample4('examplePanel4', this);">
-
</div>
<div id="examplePanel4"
style="position:absolute;
width:150px;
height:150px;
top:0px;
left:0px;
background:#a6bbcd;
overflow:hidden;">
<br /><br />Content
</div>
</div>
This code is exactly the same as the diagonally sliding panel, so let's dive right into the Javascript.
var slideElement = null;
function slideExample4(elementId, headerElement)
{
slideElement = document.getElementById(elementId);
if(slideElement.up == null || slideElement.down)
{
slideUpStep1();
slideElement.up = true;
slideElement.down = false;
headerElement.innerHTML = '+';
}
else
{
slideDownStep1();
slideElement.down = true;
slideElement.up = false;
headerElement.innerHTML = '-';
}
}
function slideUpStep1()
{
animate(slideElement.id, 0, 0, 20, 150, 250, slideUpStep2);
}
function slideUpStep2()
{
animate(slideElement.id, 0, 0, 20, 20, 250, null);
}
function slideDownStep1()
{
animate(slideElement.id, 0, 0, 20, 150, 250, slideDownStep2);
}
function slideDownStep2()
{
animate(slideElement.id, 0, 0, 150, 150, 250, null);
}
function slideExample4(elementId, headerElement)
{
slideElement = document.getElementById(elementId);
if(slideElement.up == null || slideElement.down)
{
slideUpStep1();
slideElement.up = true;
slideElement.down = false;
headerElement.innerHTML = '+';
}
else
{
slideDownStep1();
slideElement.down = true;
slideElement.up = false;
headerElement.innerHTML = '-';
}
}
function slideUpStep1()
{
animate(slideElement.id, 0, 0, 20, 150, 250, slideUpStep2);
}
function slideUpStep2()
{
animate(slideElement.id, 0, 0, 20, 20, 250, null);
}
function slideDownStep1()
{
animate(slideElement.id, 0, 0, 20, 150, 250, slideDownStep2);
}
function slideDownStep2()
{
animate(slideElement.id, 0, 0, 150, 150, 250, null);
}
The first thing you might notice is the global variable
slideElement. We need a variable
to store what div is currently sliding because the callback to the animate function can't except
parameters. The function slideExample4 is the same as the previous example except that
I've moved the call to animate into slideUpStep1. When slideUpStep1 is
called, the panel is first slid left and slideUpStep2 is passed into animate
as the callback. That means as soon as the the panel is done sliding left, slideUpStep2
will be called to slide it up. To slide the panel back out, the process is simply reversed
using slideDownStep1 and slideDownStep2.
That's it for creating sliding panels with our generic animation function. As you can see, using generic animation makes the process of creating sliding panels very simple and the sky's the limit as to how creative you want the slide process to be.
Posted in Javascript, All Tutorials by The Reddest |
August 12th, 2007 at 11:53 am
hey!
i have read the previous and new tutorial. in the new tutorial i was hoping you will show how to expand the div if the number of textlines in the div are unknown.
for example if the text with unknown length is from a webserver.
September 17th, 2007 at 5:27 am
Nice one
September 19th, 2007 at 5:20 pm
Is it possible to alter the code so the div is hidden when the page is loaded?
i tried adding onload=”slideExample1(’examplePanel1′, ‘exampleHeader1′);”
to the body element, but it doesnt seem to do the trick.
tia,
September 19th, 2007 at 5:40 pm
If I understand you correctly, and you want the panel to start contracted, then it is definitely possible.
Here’s the changes to make the first example start contracted:
1. Change the height style to 0px instead of 130px.
2. Change the header text from “^^^” to “vvv”.
3. In the JS function, slideExample1, change the if statement to if(element.up == false){…}.
That should be it. Now the panel will start contracted and expand down when it’s clicked for the first time.
September 25th, 2007 at 10:14 am
I am wondering in somebody make it so there are more than one panels under the first one and when you expand one - other collapsed?
September 26th, 2007 at 10:34 pm
Great code you got here.
One question lingers though, how do I “Put it all together”? I see the HTML code, then the JS code, but I really don’t know how to put them together. When JS is involved, I’m always stumped.
Thanks.
September 27th, 2007 at 6:26 pm
Just for you Yata, we’ve written another tutorial that explains how to put the HTML and Javascript together.
September 28th, 2007 at 12:52 am
Thank you. That completely solved the problem.
I’ll be sure to look around at the other tutorials now that I know how to use them.
Thanks again!
October 17th, 2007 at 12:55 pm
I am interested in example 2. Is these a way to make it slide from right to left?
October 19th, 2007 at 8:24 am
Great code!
I have a problem though… I tried to alter your code to make the panel start contracted. I works in Firefox, but for some reason in IE7 the panel doesn’t start contracted. Any idea on how to solve this?
October 25th, 2007 at 9:46 am
Hello, I came across this tutorial when searching for sliding panels. I am using the slideExample2 code. I am trying to figure out how to stop the panel from displaying when the page is loaded.
I tried using the method in comment 4 but I still can not get the panel to start contracted.
Any ideas?
Any help would be appreciated!
Thanks
dips
November 8th, 2007 at 11:50 pm
Lets say I have a existing css sheet, can you show me an example of the first tutorial how the html would look and css additions to current css sheet?
Also can you include in the html an example to call to the javascript if place as a file on server?
I know I’m asking alot but also in this version I like to see when onclick the ^^^ is pushed down like a tab sorta. So in reverse the ^^^ would be the bottom when you click to close.
Thanks
Still Learning
November 12th, 2007 at 4:09 pm
Hello, I want first to say that your code is great and does just what I’ve been looking for. I only need a single little twist on it - imagine the boundaries of the sliding panel “pushing away” neighboring content as the panel expands. Not only that, but the neighboring content would “move in” to fill the space left after the sliding panel is collapsed. Would much appreciate your help and input on that, thanks for your time.
December 15th, 2007 at 1:07 am
@ Comments 10 and 11
It seems that IE7 has an overflow issue that I’m running into where it won’t set the height to anything less than the minimum height at which all the content can be shown. If I pre-set the height to 1 (slider.style.height = 1;) (not zero! I don’t know why!?) it works for me.
Also, for some IE7 animations to work it seems that I need to set the top and left element settings in the javascript, otherwise it won’t work. I have no idea why this is or what I’m messing up to cause this? Oh well, pre-setting isn’t a big deal - just weird.
December 21st, 2007 at 7:25 pm
I partially fixed the “startup not contracted” problem.
Here is my solution,…
1) First I simplified the slideExample1() function by breaking it out into 2 other functions.
2) That means I took each part of the “if” statement and made new functions out of them.
3) In the end I get 3 functions like so,..
function slideExample1(elementId, headerElement) { … }
function slideUp(element, elementId, headerElement, title) { …. }
function slideDown(element, elementId, headerElement, title) { … }
4) So the “if” statement is simply calling the slideUp() and slideDown() functions.
5) Then I added an “onload” callback for my html body tag
6) That means I changed the tag of my html to look like this,…
7) And I added a new function “pageload” to the html. Something like this,…
Concluding explanation: All I have done is tell my html page to call the pageLoad() function when it is loaded by the browser. The pageload() function simply calls the slideUp() function to “close” the panel. So that just means that when my page is first opened, the panel will show. But it immediately gets closed. It happens so fast that I couldn’t tell that the panel wasn’t contracted at the beginning.
function pageload() {
var element = document.getElementById(”slideExample2″);
var header = document.getElementById(”examplePanel2″);
slideUp(element, “slideExample2″, header, “^^^”);
}
This isn’t a perfect solution. I would have preffered not to do this “sleight-of-hand” solution. But I’m not an javascript guru and this is the best I could come up with. It satisfy my needs but may not completely satisfy yours. you’ll need to tinker around with this already excellent javascript code.
I hope this helps some people
pengster
April 16th, 2008 at 6:54 am
First off, great scripts scripts, just what I was looking for, so thank you. Also to to comment 14(covenant design), its not your fault or bad coding, IE is just dumb and doesn’t know what left is. Also,I have been trying to get the diagonal slider to work but i keep coming up empty. Is that the complete code or should I be looking at other code to combine it with and if so, what?
April 16th, 2008 at 6:58 am
Also, I am trying to combine the diagonal slider with the side slider into one button, this will probably get alot easier once i get the diagonal code to work anyways but im wondering if anyone could help me do this. Im trying to make a page that is just a simple page with the slide bar on the side. Once the slide bar is clicked, I want the slider to move out and the diagonal slider to cover the other half of the page, any suggestions on how i should do this would be most appretiated. thx u!
April 22nd, 2008 at 1:13 am
hey great work, kuddos, i am trynig some thing same in my application. But my requirement is initially it should not be visible, and when i press button it sholud slide and sholud go back. Also the it should slide from bottom to top and back from top to bottom. thanks in advance…
May 8th, 2008 at 12:51 am
Good one
May 23rd, 2008 at 10:58 am
Here’s a new tutorial on how to create sliding panels which start up and slide down.
June 17th, 2008 at 3:32 am
how can I make a series of slidding panels fade rather than slide
June 17th, 2008 at 8:41 am
We don’t have an example showing exactly that, but we do have a tutorial showing how to do fading in Javascript. You shouldn’t have too much trouble combining the two into what you’re looking for.
June 20th, 2008 at 4:59 pm
i’m really stuck on trying to make example 2 have the header on the right side of the div and the panel expand to the left and contract back to the right.
July 28th, 2008 at 9:43 am
Very nice article about animation and sliding. Can someone suggest what I can do to slide Horizontal from “Right” to “Left”. Thanks any response would be appreciated.
-DV
July 29th, 2008 at 10:28 am
I figured it out, I modified this script nicely to slide out hidden panels from right to left. Check it out:
http://eferrer.info
currently broken for firefox 2.x and safari though.
is this script compatible with firefox 2.x and safari?
July 29th, 2008 at 10:39 am
The scripts were developed under Firefox 2 so I can definitely say they work there. Typically all Javascript that we post is tested under every major browser (IE, Opera, FF, and Safari). However, this one being almost a year old, I can’t remember if it was or not.
I checked out your site and it’s a great use of sliding panels. It’s a little buggy in FF3 when one of the panels contains Flash, but Flash has always been a hassle when you’re trying to hide it behind html elements.
July 29th, 2008 at 11:08 am
Yeah cool site. I think that if you remove the flash video from the panel before sliding it and add it after sliding it, it would probably work alright.
July 29th, 2008 at 3:06 pm
Thanks Eddie, great slide. If you don’t mind can you please elaborate a little on what have you changed to slide from right, have you made changes to “animation.js” or …
Thanks.
-DV
July 30th, 2008 at 9:13 am
Well the flash isnt the issue because some of the panels don’t have flash and they still do not work for firefox 2 or safari. I have no clue what that issue is.
It’s working fine for firefox 3, there is a slight flicker with the flash elements. On IE it works pretty perfect.
DV Punia - to make it slide from right to left, you just make changes to slide.js. in slide example 2 here you’ll see the two animate functions are called:
animate(elementId, 20, 0, 0, 150, 250, null);
and
animate(elementId, 20, 0, 130, 150, 250, null);
to make it go right to left you just change the values to something like:
animate(elementId, 150, 0, 0, 300, 250, null);
and
animate(elementId, 0, 0, 150, 300, 250, null);
July 30th, 2008 at 11:22 am
Thanks Eddie, I will give it a try. You are a good man
-DV
August 1st, 2008 at 11:29 am
I still cant get this script to work under firefox 2 or safari, i’m calling it like this:
i’ve taken out the header element. you can see it live on my site, but its kind of messy code, i’ve been testing it on my system on a simplified code, but nothing. any hints?
August 1st, 2008 at 11:29 am
whoops code error on previous comment.
im calling it like (in brackets of course)
a href=”javascript: slideOut(’ucftvPanel’);”
August 1st, 2008 at 2:15 pm
i figures it out, the expanding div, in this page “examplePanel” has to be below “exampleHeader”.
if not then it wont work in firefox 2 or safari
October 5th, 2008 at 7:37 am
Thank you for this great script which is easy to use, but there is one problem. Size of box must be fixed. If I want to have non-fix height script doesn’t work. Please think about that in future versions.
Thanks!
November 5th, 2008 at 4:36 pm
Hey guys this is really great, but i have a question which is if you want to have the window closed when you first open the page, how would you do that ?
any idea?
November 5th, 2008 at 4:38 pm
@Mood
We actually address that in another tutorial here.
November 20th, 2008 at 5:21 pm
Having an issue with the sliding panels ‘jumping’ as they slide. We pre-loading the images, but the browser seems to take it’s time rendering the JS animation. Anyone had a similar issue and possibly some success in fixing it?