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:
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.
Read, With the Name of Your Lord Who Created 