Uncle Jim's Javascript Examples: Wiping Banner Effect in a Table Cell

COPY - Insert Between Head Tags: <HEAD></HEAD>

/* specs for wipe layers
	 put width and height of outer layer here and in initDynLyrs fn 
	 Width of wipeLyr1 is set in initDynLyrs fn for this example
	 (necessary for ie4 with paragraph text item) */
#outerDiv { position:relative; width:220px; height:75px; z-index:100 }
#wipeDiv1 { position:absolute; z-index:1 }
/* wipe class used in doWipes fn cntnt var */
.wipe { font-size:12px; color:blue; text-align:center }
.wipe2 { text-align:left }
.wipe3 { font-size:14px; font-weight:bold; }
-->
</style>
	
<script src="js/dw_core.js" type="text/javascript"></script>
<script src="js/dw_clip.js" type="text/javascript"></script>
<script src="js/dw_util.js" type="text/javascript"></script>
<script src="js/dw_wipes.js" type="text/javascript"></script>
<script type="text/javascript">
<!--

// resize fix for ns4
var origWidth, origHeight;
if (document.layers) {
	origWidth = window.innerWidth; origHeight = window.innerHeight;
	window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}
var outerLyr, wipeLyr1;
function initDynLyrs() {
	// args: id,left,top,width,height
	outerLyr = new dynObj('outerDiv',0,0,220,75);
	wipeLyr1 = new dynObj('wipeDiv1',0,0,200);
	
	// eliminate incapable browsers
	if (!outerLyr || !document.layers && typeof outerLyr.el.innerHTML == "undefined") return;
	
	// background color and border
	outerLyr.setBgClr("white");
	if (outerLyr.el.style) {	// ns4 can't
		outerLyr.css.border = "2px outset #dee7f7"
	}
	
	doWipes();
}
window.onload=initDynLyrs;

// put images to preload in this array
var imgAr = new Array("music.gif","happydays.gif","pacificrip.gif");

// preload (Note path to images sub-directory)
if (document.images) {
	var imgList = new Array();
	for (var i=0; i<imgAr.length; i++) {
  	imgList[i] = new Image(); 
		imgList[i].src = "image/" + imgAr[i];	
  }
}

// put your items here
// content, wipe-in duration, effect for wipe-in, effect for wipe-out
var wipe_array=new Array(
	'<a href="http://jdstiles.com/"><img src="http://jdstiles.com/jim/UncleJim.gif" width="100" height="36" alt="" border="0"></a>',1500,'in center','out center',
	'<a href="http://jdstiles.com/jds.main_office.html"><img src="http://jdstiles.com/images/officetips2.jpg" width="176" height="30" alt="" border="0"></a>',1500,'in top','out top',
	'<a href="http://jdstiles.com/sets/"><img src="pacificrip.gif" width="132" height="32" alt="" border="0"></a>',1500,'in corner','out corner',
	'<div class="wipe2">Your items can be anything you like, formatted however you wish.</div>',1500,'in corner','out top left',
	'<div class="wipe3">Short text item</div>',1500,'in right','out middle'
);

// prepare for wipe in (called from doWipes fn)
function wipePrep(obj,cntnt,id) {
	obj.hide();
	// restore, for ns4, or new content is visible...
	obj.clipTo(0,obj.width,obj.height,0);	
	obj.writeLyr(cntnt);
	obj.width=getWidth(obj.el,id);
	obj.height=getHeight(obj.el,id);
}

function wipeOuts() {
	// controls speed of wipe out
	// divide time allotted for item in wipe_array by this number
	var dv = 4;
	// args: which wipe, delay, wipeTime, what next
	wipeLyr1.wipe(wipe_array[wipe_count+3], 2000, wipe_array[wipe_count+1]/dv,"doWipes()");
	wipe_count+=4;
}

//-->
</script>

COPY - Insert Inside Body: <BODY></BODY>

Copy the below external scripts:

dw_core.js | dw_clip.js | dw_util.js | dw_wipes.js