Quick Search:
CODE
Oracle PL/SQL Code Library
JOBS
Find Or Post Oracle Jobs
FORUM
Oracle Discussion & Chat
 JavaScript: Smooth Div Show/Hide Jump to:  
Category: >> JavaScript >> Smooth Div Show/Hide Bookmark and Share

<< lastnext >>

Snippet Name: Smooth Div Show/Hide

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>


Free
Oracle Magazine
Subscriptions
and Oracle White Papers


SQL University.net courses meet the most demanding needs of the business world for advanced education in a cost-effective manner. SQL University.net courses are available immediately for IT professionals and can be taken without disruption of your workplace schedule or processes.

Compared to traditional travel-based training, SQL University.net saves time and valuable corporate resources, allowing companies to do more with less. That's our mission, and that's what we deliver.

Click here to find out more
 
Home      :      Code Library      :      Sponsors      :      Privacy      :      Terms of Use      :      Contact Us 72 users online    © 2009 psoug.org

PSOUG LOGIN
Username: 
Password: 
Forgot your password?