Snippet Name: Smooth Show/Hide Div
Description: Simply copy and paste the following code inside your file and run it into a browser. Creates a hideable DIV that opens smoothly.
Comment: (none)
Language: JAVASCRIPT
Highlight Mode: HTML4STRICT
Last Modified: February 28th, 2009
|
<HTML>
<HEAD>
<STYLE TYPE="text/css">
/* the box on top of the box we wish to show - this one hide the second one
we set the height as 0.1 to avoid an IE bug when the height is 0.
*/
#coverlogin{
width: 320px;
height: 0.1em;
overflow:hidden;
visibility: hidden;
}
#loginbox{
width: 300px;
height: auto;
border: 1px solid red;
background-color: black;
color:white;
}
</STYLE>
<SCRIPT TYPE="text/javascript">
var hh=0;
var inter;
//we show the box by setting the visibility of the element and incrementing the height smoothly
function ShowBox()
{
//Depending on the amount of text, set the maximum height here in pixels
if(hh==80)
{
clearInterval(inter);
return;
}
obj = document.getElementById("coverlogin");
obj.style.visibility = 'visible';
hh+=2;
obj.style.height = hh + 'px';
}
//same way as above but reversed
function HideBox()
{
obj = document.getElementById("coverlogin");
if(hh==2)
{
obj.style.visibility = 'hidden';
obj.style.height = '0.1em';
clearInterval(inter);
return;
}
hh-=2;
obj.style.height = hh + 'px';
}
</SCRIPT>
</HEAD>
<BODY>
<!-- set an interval for the increment of the height by clicking onto this link -->
<A HREF="#" ONCLICK="inter=setInterval('ShowBox()',3);return false;">Click here to show the box</A>
<DIV ID="coverlogin">
<DIV ID="loginbox">
Now you can see what's inside the box!
<BR/>
<P ALIGN="right"><A HREF="#" ONCLICK="inter=setInterval('HideBox()',3);return false;">Close It</A></P>
</DIV>
</DIV>
Some text down the box.
<BODY>
</HTML> |
