New tutorials View all
Encapsulation in PHP
Abstract classes in PHP
An introduction to MySQL databases in PHP
Creating a user login and registration system.
First Lesson of HTML
New forum replies
Confused in The big and general IRC Bot...Jim in Php irc bot logwescooldude3 in Php irc bot logJim in AJAX + loadingJim in Php irc bot say namewescooldude3 in Php irc bot say nameRealShadow in AJAX + loading
New frontpage replies
tutorials: Creating an IRC bot in PHPtutorials: Creating an IRC bot in PHPtutorials: Creating an IRC bot in PHPtutorials: Creating an IRC bot in PHPtutorials: Creating an IRC bot in PHP
New articles
New news
Making a sliding div in Javascript (980 views)
Most people dislike JavaScript because it’s not that fast. But JS has some interesting features. We’ll talk about one of those today, making a div slide by hitting a single button.
Hi and welcome to this first JavaScript tutorial. In this tutorial I will quickly teach you how to make a slider. There are several ways to do so, but I will explain a simple one to you.
What we will slide in this tutorial will be a simple div. This div can be different things like a menu, reply box, a photo box etc. But in this example we'll fill it with some text.
First start with the basic page, I will assume you have basic HTML knowledge in this tutorial.
Now let's start with the JavaScript. We will add the code right into our document, for this is easier in this example.
First we need a toggle function, the main function that checks if the menu needs to go up, or down. We'll name it the toggle_visible() function.
The first thing to notice is the "active" variable. This is a variable that holds one or zero, 1 to indicate the menu is still active and has full height. The 0 to indicate the menu is hidden, and has zero height. Each time we'll use the toggle_visible() function we'll update this variable to the right status. We'll come back to this in a second.
You can ignore the height variable for now, this for later importance.
Next is to actually make the function. This shouldn't be a problem. Then we'll check the "active" variable for its content. If it's zero its inactive so we'll need to activate the menu. If its one, the menu is active, and needs to be closed down.
You'll see that the "active" variable is update each time we'll run the function. But along with changing the active variable, you'll also see we're calling for a function. These are the functions that really make the menu slide.
So let's take a quick look at these functions, first with the divMinusOne() function.
First to do is to check the height. We are doing this with the "height" variable that we made a while ago. While it's higher than 20 we'll run it. This is the function that will make the big menu disappear.
If this function is called and the height is less than 20, you can see we set the div style to hidden.
While it's still more than 20 we need to crop its height. The first thing you'll see is "height = height – 1;". Here we are cropping the height variable "its value, minus one". So this has the value of the div, but minus one.
Now to apply it to our div, we use the style.height object for this.
Next is the little bit of magic to make this menu really slide. The setTimeout function lets you re-call a function after a little while of time. Each time after we cropped the height we call the function again. Until it's less than 20, we'll make the div hidden and the job is done.
Next is the PlusOne function. This is basically the same function, but this time it makes the menu bigger. So the first thing to do is to check its height again. The max height is 100, so when its less than 100, we need to rise the menu.
First to make the menu visible again; because the other function made it hidden at the end of the function remember?
This time we need to make the "height" variable higher, so we'll add it by one. After we done that we'll apply it to the div.
When done that we'll call the setTimeout, and we'll call the function until the menu is 100 again.
Finishing the menu.
The only thing we need to do know is to finish it, the last real important part is to make a link to call the toggle_visible() function. It's simple, so a little example should do:
Well then, test the file now; it should work under at least FireFox and Internet Explorer.
You can see my result here if yours isn't working.
What we will slide in this tutorial will be a simple div. This div can be different things like a menu, reply box, a photo box etc. But in this example we'll fill it with some text.
First start with the basic page, I will assume you have basic HTML knowledge in this tutorial.
| php | |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <title>JavaScript test</title> </head> <body> <div id="testDiv">And here is my very slick menu!</div> <a href="#">Toggle</a> </body> </html> |
Now let's start with the JavaScript. We will add the code right into our document, for this is easier in this example.
First we need a toggle function, the main function that checks if the menu needs to go up, or down. We'll name it the toggle_visible() function.
| php | |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script language="javascript"> var active = 1; var height = 100; function toggle_visible() { if(active == 0) { active = 1; divPlusOne(); } else if(active == 1){ active = 0; divMinusOne(); } } </script> |
The first thing to notice is the "active" variable. This is a variable that holds one or zero, 1 to indicate the menu is still active and has full height. The 0 to indicate the menu is hidden, and has zero height. Each time we'll use the toggle_visible() function we'll update this variable to the right status. We'll come back to this in a second.
You can ignore the height variable for now, this for later importance.
Next is to actually make the function. This shouldn't be a problem. Then we'll check the "active" variable for its content. If it's zero its inactive so we'll need to activate the menu. If its one, the menu is active, and needs to be closed down.
You'll see that the "active" variable is update each time we'll run the function. But along with changing the active variable, you'll also see we're calling for a function. These are the functions that really make the menu slide.
So let's take a quick look at these functions, first with the divMinusOne() function.
| php | |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function divMinusOne() { if(height >= 20) { height = height - 1; document.getElementById('testDiv').style.height=height + 'px'; window.setTimeout('divMinusOne()', 1); } else { document.getElementById('testDiv').style.visibility="hidden"; } } |
First to do is to check the height. We are doing this with the "height" variable that we made a while ago. While it's higher than 20 we'll run it. This is the function that will make the big menu disappear.
If this function is called and the height is less than 20, you can see we set the div style to hidden.
While it's still more than 20 we need to crop its height. The first thing you'll see is "height = height – 1;". Here we are cropping the height variable "its value, minus one". So this has the value of the div, but minus one.
Now to apply it to our div, we use the style.height object for this.
Next is the little bit of magic to make this menu really slide. The setTimeout function lets you re-call a function after a little while of time. Each time after we cropped the height we call the function again. Until it's less than 20, we'll make the div hidden and the job is done.
| php | |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function divPlusOne() { if(height <= 100) { document.getElementById('testDiv').style.visibility="visible"; height = height + 1; document.getElementById('testDiv').style.height=height + 'px'; window.setTimeout('divPlusOne()', 1); } } |
Next is the PlusOne function. This is basically the same function, but this time it makes the menu bigger. So the first thing to do is to check its height again. The max height is 100, so when its less than 100, we need to rise the menu.
First to make the menu visible again; because the other function made it hidden at the end of the function remember?
This time we need to make the "height" variable higher, so we'll add it by one. After we done that we'll apply it to the div.
When done that we'll call the setTimeout, and we'll call the function until the menu is 100 again.
Finishing the menu.
The only thing we need to do know is to finish it, the last real important part is to make a link to call the toggle_visible() function. It's simple, so a little example should do:
| php | |
|
1 |
<a href="#" onClick="toggle_visible()">Toggle</a> |
Well then, test the file now; it should work under at least FireFox and Internet Explorer.
You can see my result here if yours isn't working.
Replies on Making a sliding div in Javascript:
Jump to comment page: 1
By Jim on Sunday 04 May 2008 10:53
http://www.combined-minds.net/forum/topic/31/Slider_tutorial_help/
Does this fills your needs? 
Jump to comment page: 1
You are not logged in. Please login or register an account, it just takes 30 seconds.
I dont want the sliding div to be visible in the first place and after clicking toggle it shud open.....what shud i do......
PS: amazing tutorial