Exchange links - Web site Traffic

Javascript - Background & Documents Effects

Smooth Box Move

Simply copy and paste the following code inside your file and run it into a browser.
If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

<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>  <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>

You can use this simple script wherever you wish; for instance I use it to display a form if a user wishes to login without the need of loading a new page (it's a way to avoid having a permanent login box on the current page).

Comments

Post a first comment now