Curtain Effect - Centre Open

Welcome to the show!!

This script is just like the Curtain Effect - Bottom to Top script except it uses 2 layers and opens from the middle.

Put these lines in your <head></head> tag.
<script language="JavaScript">
<!-- Hide from old browsers
// Copyright © 2000 Doug Popeney
// Created by Doug Popeney (easyjava@easyjavascipt.com)
// JavaScript Made Easy!! - http://www.easyjavascript.com

xLeft = 0;
xRight = 0;

function openCurtain(){
	xLeft -= 5
	xRight += 5
	if (navigator.appName == "Netscape"){
		document.curtainLeft.left = xLeft
		document.curtainRight.left = xRight
		aLeft = document.curtainLeft.left
	}
	else{
		document.all.curtainLeft.style.left = xLeft;
		document.all.curtainRight.style.left = xRight;
		a =  document.all.curtainLeft.style.left;
		aLen = a.length;
		a = a.split("");
		aLeft = ""
		for (k = 0; k < aLen - 2; k++){
			aLeft += a[k]
		}
		aLeft = new Number(aLeft)
	}
	if(aLeft > stopPos){
		var timer=setTimeout("openCurtain()",10)
	}
	else{
		if (navigator.appName == "Netscape"){
			document.curtainLeft.visibility = document.curtainRight.visibility = "hide"
		}
		else{
			document.all.curtainLeft.style.visibility = document.all.curtainRight.style.visibility = "hidden"
		}
	}
}
// -->
</script>

John Massam wrote:Add the following to your <BODY> command line:
onLoad="openCurtain();"
Now put this anywhere in the body of your web page.
<script language="JavaScript">
<!-- Hide from old browsers
if (navigator.appName == "Netscape"){
	document.write('<layer name="curtainLeft" left="0" top="0" bgcolor="#0000FF" width="100" height="100" visibility="show"></layer>');
	document.write('<layer name="curtainRight" left="0" top="0" bgcolor="#0000FF" width="100" height="100" visibility="show"></layer>');
	document.curtainLeft.clip.height = document.curtainRight.clip.height = window.innerHeight;
	document.curtainLeft.clip.width = document.curtainRight.clip.width = document.curtainRight.clip.left = (window.innerWidth/2) - 10
	stopPos = "-" + window.innerWidth/2
}
else{
	document.write("<span id='curtainLeft' style='position:absolute;visibility:visible;top:0;left:0;background-color:#0000FF;'></span>");
	document.write("<span id='curtainRight' style='position:absolute;visibility:visible;top:0;left:0;background-color:#0000FF;'></span>");
	xRight = document.all.curtainRight.style.left = document.all.curtainLeft.style.width = document.all.curtainRight.style.width = document.all.curtainRight.style.left = (document.body.clientWidth/2) - 10
	document.all.curtainLeft.style.height = document.all.curtainRight.style.height = document.body.clientHeight;
	stopPos = document.body.clientHeight * (-1);
}
// -->
</SCRIPT>

You can change the background color by editing BGCOLOR in the <LAYER> tag and BACKGROUND-COLOR in the <SPAN> tag. You can also put an image in there. Change the BACKGROUND-COLOR in the <SPAN> tag to background-image:url(YOUR IMAGE);. For the <LAYER> tag, change BGCOLOR to BACKGROUND="YOUR IMAGE"
Note: It will take a lot longer to bring the curtain up if you use an image.

You can adjust the speed of the curtain by changing the number in the following line.
		var timer=setTimeout("openCurtain()",10)
(I saw no change in speed between 1, 10, and 50 -- jcm 08Jul00)



Mirrored from JavaScript Made Easy!! at:   http://www.easyjavascript.com/javascript.html (which some time around 14-15 July 00 closed down), curtain colour changed from Black to Blue, added to 12Jul00, last modified 16Jul00

Copyright © 1999 Doug Popeney - JavaScript Made Easy
All Rights Reserved. Legal Notice