The below script should work out for you. To get it to always be on top of the slideshow, set its base zIndex to 100000:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#dropin {
position:absolute;
visibility:hidden;
left:200px;
top:200px;
width:450px;
height:300px;
background-color:#F5F5F5;
}
#dropin2 {
position:absolute;
visibility:hidden;
left:10px;
top:100px;
width:200px;
height:300px;
background-color:#dcdcdc;
}
#dropin3 {
position:absolute;
visibility:hidden;
right:10px;
top:50px;
width:250px;
height:200px;
background-color:yellow;
color:blue;
}
</style>
<script type="text/javascript">
// Drop-in content box- By Dynamic Drive
// For full original source code and more DHTML scripts, visit http://www.dynamicdrive.com
// This credit MUST stay intact for use. Last Modified: 3/Sep/2007
dropBox.zIndex=1000; //Set Base z-index style for drop boxes
// Instructions -
/* Usage:
to drop:
new dropBox('id_of_dropin_division', optional_bounce, optional_final_top);
bounce defaults to 32, final_top defaults to the division's style top (offsetTop).
to close:
dropBox['id_of_dropin_division'].dismissBox();
////////////////////////// Do Not Edit ///////////////////////*/
function dropBox(id, bounceLimit, finalTop){
if (!document.getElementById)
return
dropBox[id]=this;
this.finalTop=typeof finalTop=='number'? finalTop : document.getElementById(id).offsetTop;
this.bounceLimit=typeof bounceLimit=='number'? bounceLimit-bounceLimit%8 : 32;
this.obj=document.getElementById(id).style;
this.obj.zIndex=dropBox.zIndex++;
this.scrollTop=typeof window.pageYOffset=='number'? window.pageYOffset : this.trueBody().scrollTop;
this.obj.top=this.scrollTop-250+'px';
this.obj.visibility='visible';
this.dropStart=setInterval(function(){dropBox[id].dropIn();},50);
}
dropBox.prototype.dropIn=function(){
this.scrollTop=typeof window.pageYOffset=='number'? window.pageYOffset : this.trueBody().scrollTop;
if (parseInt(this.obj.top)<this.finalTop+this.scrollTop)
this.obj.top=Math.min(this.finalTop+this.scrollTop ,parseInt(this.obj.top)+40)+'px';
else{
var dropper=this;
clearInterval(this.dropStart);
this.bounceStart=setInterval(function(){dropper.bounceIn();},50);
}
}
dropBox.prototype.bounceIn=function(){
this.obj.top=parseInt(this.obj.top)-this.bounceLimit+'px';
if (this.bounceLimit<0)
this.bounceLimit+=8;
this.bounceLimit=this.bounceLimit*-1;
if (this.bounceLimit==0)
clearInterval(this.bounceStart);
}
dropBox.prototype.dismissBox=function(){
clearInterval(this.bounceStart);
this.obj.visibility='hidden';
}
dropBox.prototype.trueBody=function(){
return (document.compatMode && document.compatMode!='BackCompat')? document.documentElement : document.body;
}
</script>
</head>
<body>
<input type="button" value="Drop 1" onclick="new dropBox('dropin');"><br>
<input type="button" value="Drop 2" onclick="new dropBox('dropin2',64);"><br>
<input type="button" value="Drop 3" onclick="new dropBox('dropin3',0);">
<div id="dropin">
<div align="right"><a href="#" onClick="dropBox['dropin'].dismissBox();return false">[Close Box] </a></div>
Drop 1 - SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML
</div>
<div id="dropin2">
<div align="right"><a href="#" onClick="dropBox['dropin2'].dismissBox();return false">[Close Box] </a></div>
Drop 2 - SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML
</div>
<div id="dropin3">
<div align="right"><a href="#" onClick="dropBox['dropin3'].dismissBox();return false">[Close Box] </a></div>
Drop 3 - SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML
</div>
</body>
</html>
Making The "Drop-In" Content Box Drop Only When Clicked!
......the script is awesome !
Reply With Quote
(not able to do it)
Bookmarks