Read, With the Name of Your Lord Who Created

Sliding Div Using Javascript

Posted by triaslama on February 28, 2008

Javascript is useful, and in this post I will try to reveal the power of setTimeout one of the method of window object. This method allow us to execute a function after a specified time (in milliseconds). We will make a div element that can be collapsed or expanded dynamically by hitting a button, so lets start.

Consider we have html page with a div element and a collapse/expand button inside it. The div element contains three buttons (each button will produce an alert, confirm, and prompt box respectively). The collapse/expand button expand / collapse the div element depends on the status of div element itself. Below is the screen shoot of our simple page:

defaultdivslider3.jpg

I hope the picture is self explanatory, by clicking the collapse button the div element will degrade and finally disappear. After the div element disappear the Collapse button will changed with Expand button. Clicking the expand button will show our div and it will expand dynamically until a specified size.

Clicking one of three buttons inside div element will produce an alert or confirm or prompt box depends on what button we are clicked.

So lets jump to the code! I split the code into two pieces -Html file (SlidingDiv.htm) and Javascript file (SlidingDiv.js)-. Here the HTML code:


<html>
<head>
<title>Sliding Div HTML</title>
<script lang="javascript" type="text/javascript" src="slidingdiv.js">
</script>
</head>
<body>
<div id="targetDiv" style="width:500px;height:250px;background-color:gainsboro; ">
<center style="font-weight:bold" >Target Div</center>
<p>
<center>
<input type="button" id="btnAlert" onclick="showAlert()" value="Alert" />
<input type="button" id="btnConfirm" onclick="showConfirm()" value="Confirm" />
<input type="button" id="btnPrompt" onclick="showPrompt()" value="Prompt" />
</center>
</div>
<p>
<input type="button" id="btnExpandCollapse" onclick="slideHandler()" />
</body>
</html>

The above code simply produce an output like the screen shoot picture. Please notice that the code refers to a Javascript file named slidingdiv.js. And this is the Javascript code:


var status;
var height;
var max;
var min;


// Initialize our variables here
window.onload = function(){
var temp = document.getElementById("targetDiv").style.height;
height = parseInt(temp);
status = 1;
max = height;
min = 60;
document.getElementById("btnExpandCollapse").value = "Collapse";
};


function slideHandler()
{
if (status==0) {
expand();
status = 1;
}
else {
collapse();
status = 0;
}
}

function collapse()
{
if (height>min) {
height -= 1;
document.getElementById("targetDiv").style.height = height;
document.getElementById("btnExpandCollapse").disabled = true;
window.setTimeout("collapse()", 1);
}
else {
setButtonValue("Expand");
document.getElementById("targetDiv").style.visibility = "hidden";
}
}


function expand()
{
if (document.getElementById("targetDiv").style.visibility == "hidden")
document.getElementById("targetDiv").style.visibility = "visible";
if (height<max){
height += 1;
document.getElementById("targetDiv").style.height = height;
document.getElementById("btnExpandCollapse").disabled = true;
window.setTimeout("expand()", 1);
}
else {
setButtonValue("Collapse");
}
}



function setButtonValue(val)
{
document.getElementById("btnExpandCollapse").value = val;
document.getElementById("btnExpandCollapse").disabled = false;
}


function showAlert()
{
window.alert("Alert...");
}


function showConfirm()
{
window.confirm("Confirm?");
}


function showPrompt()
{
window.prompt("Prompt: ");
}

The Javascript code start with variables initialization, and the initialization accomplished inside anonymous function that passed in window.onload. The window.onload happen when html element has finished to be rendered.

There are several variables that need to be initialized. Status variable indicate the ‘div’ element status, if status=1, ‘div’ element is visible and value of expand/collapse button is ‘Collapse’. If status=0 ‘div’ element is hidden and value of expand/collapse button is ‘Expand’. Temp variable holds the height of ‘div’ element. After the value of temp parsed to integer its value preserve in height variable. Don’t forget to parse the value that retrieved from height property of targetDiv to integer, because this value actually not a number! So parse this value to integer first to make it work!

Function slideHandler() called every time we clicked expand/collapse button, if status is ‘0’ the ‘div’ will be expanded and status changed to 1. If status=1 ‘div’ element will be collapsed and status changed to 0.

Function collapse() will collapse ‘div’ element with the sliding effect, then if the height<min we set the visibility of div element to ‘hidden’. Function expand() will expand ‘div’ element with the sliding effect, but first we need to set visibility of ‘div’ element to ‘visible’. Actually what makes the sliding effect work is the window.setTimeout() function!

window.setTimeout() receives two parameter, first parameter is the name of function that will be executed after a specified delay of time, second parameter is delay of time (in milliseconds). In our case window.setTimeout() called inside expand() and collapse() function.

Inside collapse() function the value of height variabel decrement by one and its value send to height property of ‘div’ element. After that we disabled the expand/collapse button and call window.setTimeout() with delay one millisecond and passed collapse() as function that will be executed after elapsed delay. In the other words its recursive! The recursive call will end if height less than min (in this case we set the expand/collapse button value to ‘Expand’ and visibility of ‘div’ element to hidden). Setting div visibility to hidden automatically also hidden controls that placed inside ‘div’ element.

The expand() function work in similar way but we increment the height value by one, and passed expand() as first parameter of window.setTimeout(). Collapse function also set the visibility of ‘div’ element to visible if it was hidden. In the end of recursive call inside expand we set the value of expand/collapse button to ‘Collapse’.

The others should be work as it is so I think it doesn’t need explanations. I hope this useful.

Thanks and regards, Tri Sugiyantowo.

9 Responses to “Sliding Div Using Javascript”

  1. l42l said

    its not good , cuz when i enter some data to DIV , when it wants to collapse it , it can’t , it goes till there is space not data,

  2. Lee said

    hi, thanks for the code here, it’s very nice.
    about the DIV content, i used

    var content=document.getElementById(“divname”).innerHTML;

    modify the collapse function to set
    document.getElementById(“divname”).innerHTML=””;

    modify the expand function add:
    document.getElementById(“divname”).innerHTMl=content;

    hope it works!

  3. triaslama said

    @ Lee
    Hello Lee, I have try your code and yes it works.
    But the div collapse and expand immadiately, it doesn’t seem degrading gradually.
    Anyway, your idea is OK!

  4. Rohit said

    it does not work with mozilla firefox browser

  5. ak said


  6. Sk said

    Apart from the generally bad markup (center tags are deprecated, you’re not specifying an XML namespace which results in some browsers rendering your page as XML with their own XSLT style, non-closed p tags, the incorrect lang attribute in the script tag), the visual effect is not quite uniform. I saw it go up quick for a short bit, then slow down for the rest of the collapse, while the expand was slow. While the overall speed can easily be changed, you should address the problem of this apparent deceleration.

  7. sr22 insurance quotes…

    […]Sliding Div Using Javascript « Read, With the Name of Your Lord Who Created[…]…

  8. lol copypasta…

    […]Sliding Div Using Javascript « Read, With the Name of Your Lord Who Created[…]…

  9. Incredible quest there. What occurred after?
    Take care!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: