<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fader</title>
<!-- load the dojo toolkit base from Google if you do not want to host the libraries locally-->
<!-- First the Google javascript api (Dojo, MooTools, script.aculo.us, Prototype, jQuery can then be downloaded) -->
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// now load dojo from Google
google.load("dojo", "1.3.2");
// user defined constants
var the_duration = 3000 ;
var delay = 6000;
var numberOfDivs = 4 ; // Note: divs must be named 'container0', 'container1', etc
var current_div = 0 ;
var theDivs = [];
var interval_handle ; // This can be used to stop the animation
function init(){
for( i=0 ; i<numberOfDivs; i++ ){
id = 'container' + i ;
theDivs[i] = document.getElementById( id ) ;
}
for( i=1 ; i<numberOfDivs; i++ ){
var a1 = dojo.fadeOut({
duration: 1,
node:theDivs[i]
});
a1.play( ) ;
}
dojo.require("dojo.fx");
interval_handle = setInterval("rotate_text();" , delay);
}
function rotate_text(){
var was = theDivs[ current_div ];
current_div++ ;
if( current_div >= numberOfDivs ){
current_div = 0; }
var will_be = theDivs[ current_div ] ;
var a1 = dojo.fadeIn({
duration: the_duration,
node:will_be
});
var a2 = dojo.fadeOut({
duration: the_duration,
node:was
});
dojo.fx.combine([a1,a2]).play( );
}
window.onload = init ;
</script>
<style type="text/css">
h1, h3, h2 , h4 {text-align:center}
.boxA { width: 95%; height: 300px; margin: 0; padding: 0; background: #eeeeee ; text-align: center;
position: absolute; }
.boxcontainer { width: 95%; height: 300px; }
</style>
</head>
<body>
<div id="contentcontainer" class="boxcontainer">
<div id="container3" class="boxA">Panel 4
<h1> <br /> </h1>
<h1> <br /> </h1>
<h1>Last of the series</h1>
<h1> <br /> </h1>
</div>
<div id="container2" class="boxA">Panel 3
<h1>Third time is a charm</h1>
<h1> <br /> </h1>
<h1> or so they say </h1>
</div>
<div id="container1" class="boxA">Panel 2
<h1> <br /> </h1>
<h1> <br /> </h1>
<h1>Something New and exciting here</h1>
<h1> <br /> </h1>
<h1> and here </h1>
</div>
<div id="container0" class="boxA">Panel 1
<h1>Something old here</h1>
<h1> and here </h1>
</div>
</div>
</body>
</html>
