Dynamic Drive DHTML Scripts- DHTML Billboard Script

New Revised CSS Library Forums Web Tools

DHTML Billboard Script

Author: Dynamic Drive

Description: Real life billboards use interesting transitional effects in between messages to catch viewers' attention. Well, so does this DHTML billboard script! In IE5.5+, a random multimedia effect is applied during each message change, while in other modern browsers (NS6+/Opera7+), the script still functions as normal, though minus the effect.

This script uses regular DIV tags to contain all the messages you wish to be shown, for ease of customizing them. Additionally, in older browsers (ie: NS4/IE4), you can choose whether the script should hide all of the content or not, since if the later, all of the content is shown all at once (depending on your page design, you may not want this).

Demo: In IE5.5+, a random transitional effect is applied during each message change.

JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents.

Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master.

Real life billboards use interesting transtional effects in between messages to catch viewers' attention. Well, so does this DHTML script!

Directions

Step 1: Insert the below code into the HEAD section of your page:

Select All

<style type="text/css">

/*Modify attributes of #contentwrapper below as desired*/
#contentwrapper{
width: 230px;
height: 200px;
border: 1px solid black;
background-color: #C6FFC6;
padding: 5px;
}

.billcontent{
width: 100%;
display:block;
}

</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
***********************************************/

//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)

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(){
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()
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>

Follow the comments within code to customize the required parts.

Step 2: Then, insert the below block of HTML codes where you wish the billboard to appear on your page:

This is where you'll enter your billboard contents. Each piece of content is contained inside its own designated <DIV> tag. Such a <DIV> tag looks like:

<div id="billboard0" class="billcontent">
First HTML content goes here
</div>

For each additional content you add, be sure to increment "billboard0", for example, "billboard1", "billboard2" etc.