Top-Down Curtain Script -element only?

**Fudd** · 03-18-2006, 04:24 AM

Anyone think it's possible to get this script effect (or similar) to work on a single page element (like a DIV)? Hope to find a way to reveal content of an element this way, or by dissolving an overlayed image gradually.

Thoughts anyone?

**jscheuer1** · 03-18-2006, 08:18 AM

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>
.intro {
position:absolute;
left:0;
top:0;
background-color:yellow;
border:0.1px solid yellow;
z-index:10;
}
</style>
</head>
<body>
<br>&nbsp;
<div style="position:relative;width:300px;height:260px!important;height:250px;border:2px solid red;font:85% sans-serif;">
<div style="margin:1ex 1em;text-indent:1em;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="i1" class="intro"></div><div id="i2" class="intro"></div></div>
<script type="text/javascript">

/*
Top-Down Curtain Script- By Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, and TOS,
visit http://www.dynamicdrive.com
*/

var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
var speed=10
var temp=new Array()
var temp2=new Array()
if (ie4||ns6){
var topEl=ns6?document.getElementById("i1").parentNode:document.all['i1'].parentNode
var clipbottom=topEl.offsetHeight/2
cliptop=0
for (i=1;i<=2;i++){
temp[i]=ns6?document.getElementById("i"+i).style:document.all['i'+i].style
temp[i].width=topEl.offsetWidth-4+'px'
temp[i].height=topEl.offsetHeight/2-(ns6?3:2)+'px'
temp[i].top=(i-1)*parseInt(temp[i].height)+'px'
}
}

function openit(){
if (ie4||ns6){
clipbottom-=speed
temp[1].clip="rect(0 auto "+clipbottom+"px 0)"
cliptop+=speed
temp[2].clip="rect("+cliptop+"px auto auto auto)"
if (clipbottom<=-5){
clearInterval(stopit)
if (ns6){
temp[1].display="none"
temp[2].display="none"
}
}
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo();

</script>
</body>
</html>

**Fudd** · 03-18-2006, 06:19 PM

John --- that is a beautiful thing. A thousand thanks.

Thread: Top-Down Curtain Script -element only?

Thread Tools

Search Thread

Top-Down Curtain Script -element only?

Bookmarks

Bookmarks

Posting Permissions