User Rated at:
Rate This:
Select a rating... 5 .. Best 4 3 .. Average 2 1 .. Worst

Pretty neat little script. make a bouncing motion as it comes into the window. Direction can be controlled as with the bounce. Also you can control the speed of the bounce.

browsers: IE4+, NS4.xx, NS6+, Mozilla 1.3+

<!---Head--->
<script language="JavaScript1.2" type="text/javascript">
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by 8)
var direction="up"

// controls the speed of the bounce. 
//higher the number the slower it is.
var boxspd=50

// controls the postion of the drop,
// smaller the number, higher the box
var boxpos=100

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<boxpos+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",boxspd)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}


window.onload=initbox

</script>

<!---Body--->

<div id="dropin" style="position:absolute;visibility:hidden;left:200px;top:100px;width:500px;height:300px;background-color:#F5F5F5">

<div align="right"><a href="#" onClick="dismissbox();return false">[Close Box] </a></div>

YOUR CONTENT GOES HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML

</div>