PDA

View Full Version : DHTML Billboard questions...



mcongrove
02-08-2006, 10:14 PM
Script: DHTML Billboard Script
URL: http://www.dynamicdrive.com/dynamicindex2/dhtmlbillboard.htm

Hey,

I saw this question on here from a while ago, but no one responded. Is anyone aware of or working on a way to add start+stop+next+previous buttons to this script?

Also, when the transition starts, the previous billboard disappears. Anyway to override this, so that the next billboard overlays the last one, instead of going blank?

Thanks for the help.

jscheuer1
02-09-2006, 10:22 AM
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:


<!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>

Mtwo
10-06-2008, 06:28 PM
Hello,

I have a modified Billboard script that has the memory function and pauses on hover. I would like to add the Next/Previous & Start/Stop functionality of this. Can someone help me merge these two scripts? Below is the JS of the modified billboard script.



// JavaScript Document - Billboard with memory plus pause on hover

/***********************************************
* DHTML Billboard script- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//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=["GradientWipe(GradientSize=1.0 Duration=1.5)"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.

var tickspeed=7000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=1500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=0 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).

var filterid=Math.floor(Math.random()*billboardeffects.length)

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(){
if(expandboard.pause){
setTimeout("expandboard()",300);
return;
}
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
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()
document.cookie="billboardmemory="+selectedDiv+";"
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
if (getCookie("billboardmemory")!="")
selectedDiv=parseInt(getCookie("billboardmemory"))
expandboard()
}

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill

Mtwo
01-29-2009, 06:47 PM
Can anyone help with adding previous and next buttons to this memory billboard script?

jscheuer1
01-29-2009, 07:00 PM
Please start a new thread for a new question.