The previous billboard needs to disappear occasionally otherwise, the new one(s) with a lower stacking order cannot be seen. In forwards mode, this is only the transition from last back to first. In backwards mode, every transition needs to be a 'disappear and fill'. If the stacking order is fiddled with during play, it suspends the effects altogether. Other than that, this is very close:
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">
/*Modify attributes of #contentwrapper below as desired*/
#contentwrapper{
position:relative;
width: 230px;
height: 200px;
border: 1px solid black;
background-color: #C6FFC6;
padding: 5px;
}
.billcontent{
position:absolute;
width: 225px!important;
height:95%;
width: 100%;
display:block;
background-color: #C6FFC6;
}
</style>
<script type="text/javascript">
/***********************************************
* DHTML Billboard script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* For control buttons and smoother transitions
***********************************************/
//List of transitional effects to be randomly applied to billboard:
var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]
//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.
var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).
var filterid=Math.floor(Math.random()*billboardeffects.length)
var stop=0
document.write('<style type="text/css">\n')
if (document.getElementById)
document.write('.billcontent{display:none;\n'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}\n')
else if (hidecontent_from_legacy)
document.write('#contentwrapper{display:none;}')
document.write('</style>\n')
var selectedDiv=0
var totalDivs=0
function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}
function expandboard(one){
if (stop)
return;
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
if (!selectedDivObj.filters||(selectedDivObj.filters&&(selectedDiv==0||(typeof one!='undefined'&&one=='backOne'))))
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length>1){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
if (typeof one=='undefined'){
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}
}
function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}
if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill
</script>
</head>
<body>
<div id="contentwrapper">
<div id="billboard0" class="billcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents.
</div>
<div id="billboard1" class="billcontent">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master.
</div>
<div id="billboard2" class="billcontent">
Real life billboards use interesting transtional effects in between messages to catch viewers' attention. Well, so does this DHTML billboard script!
</div>
</div>
<input id="dirS" type="button" value="Stop" onclick="stop=1;selectedDiv=selectedDiv>0? selectedDiv-1 : totalDivs-1;for (var i_tem = 0; i_tem < document.getElementsByName('dirC').length; i_tem++){document.getElementsByName('dirC')[i_tem].disabled=false};this.disabled=true;">
<input name="dirC" type="button" value="Next" disabled onclick="stop=0;selectedDiv=selectedDiv<totalDivs-1? selectedDiv+1 : 0; expandboard('one');">
<input name="dirC" type="button" value="Previous" disabled onclick="stop=0;selectedDiv=selectedDiv>0? selectedDiv-1 : totalDivs-1;expandboard('backOne');">
<input name="dirC" type="button" value="Go" disabled onclick="stop=0;selectedDiv=selectedDiv<totalDivs-1? selectedDiv+1 : 0;for (var i_tem = 0; i_tem < document.getElementsByName('dirC').length; i_tem++){document.getElementsByName('dirC')[i_tem].disabled=true};expandboard();document.getElementById('dirS').disabled=false;">
</body>
</html>
New Comer (less than 5 posts)
DHTML Billboard questions...
Posting Permissions
Bookmarks