Dynamic Drive DHTML Scripts- ProHTML ticker

New Revised CSS Library Forums Web Tools

ProHTML ticker

Author: Dynamic Drive

Description: Tired of the meticulous format required when entering messages into JavaScript Tickers? ProHTML Ticker rotates regular HTML messages wrapped around simply in DIV tags, making updating its content a breeze! Some highlights of this script are:

Uses CSS to control most visual aspects of the scroller, for easy customization.
Supports an optional "subject" for each message, displayed at the top of the ticker.
Cross browser functional/friendly- Script works in IE5+ and NS6+, and degrades well with the rest (all messages are simultaneously made viewable for the later).

Demo:

JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.

Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages.

DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML.

Through them a new level of interactivity is possible for the end user experience.

Directions

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

Select All
<style type="text/css"> #dropcontentsubject{ width: 250px; font-weight: bold; } .dropcontent{ width: 250px; height: 200px; border: 1px solid black; background-color: #DFDFFF; padding: 3px; display:block; } </style> <script type="text/javascript"> /*********************************************** * ProHTML Ticker script- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds) var enablesubject=1 //enable scroller subject? Set to 0 to hide if (document.getElementById){ document.write('<style type="text/css">\n') document.write('.dropcontent{display:none;}\n') document.write('</style>\n') } var selectedDiv=0 var totalDivs=0 function contractall(){ var inc=0 while (document.getElementById("dropmsg"+inc)){ document.getElementById("dropmsg"+inc).style.display="none" inc++ } } function expandone(){ var selectedDivObj=document.getElementById("dropmsg"+selectedDiv) contractall() document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject") selectedDivObj.style.display="block" selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0 setTimeout("expandone()",tickspeed) } function startscroller(){ while (document.getElementById("dropmsg"+totalDivs)!=null) totalDivs++ expandone() if (!enablesubject) document.getElementById("dropcontentsubject").style.display="none" } if (window.addEventListener) window.addEventListener("load", startscroller, false) else if (window.attachEvent) window.attachEvent("onload", startscroller) </script>

The style sheet above controls most of the visual aspects of the ticker. There are also two variables inside the script that follows (see comments) that you can configure.

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

Select All
<div id="dropcontentsubject"></div> <div id="dropmsg0" class="dropcontent" subject="What is JavaScript?"> JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer. </div> <div id="dropmsg1" class="dropcontent" subject="Java & JavaScript Differences"> Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not. </div> <div id="dropmsg2" class="dropcontent" subject="What is DHTML?"> DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience. </div>

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

<div id="dropmsg0" class="dropcontent">
First HTML content goes here
</div>

For each additional content you add, be sure to increment "dropmsg0", for example, "dropmsg1", "dropmsg2" etc.