This ticker works by displaying Web standards compliant HTML blocks of code. Formatting is accomplished with simple HTML and CSS. Very clean and sleek.... detail
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Code:
<style type=text/css>
#tic {
/* enter any styles for the ticker below */
border: .05em #CEC3AD solid;
font-size:0.85em;
padding:10px;
width:400px;
line-height:20px;
}
#tic * {
/* this will hide all children tags */
font-size: 1em;
margin:0px;
padding:0px;
display:none;
}
#tic a {
/* add more tags to this list if you wish to display them inside the children */
display:inline;
}
</style>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript">
// Created by: James Crooke :: http://www.cj-design.com
var list; // global list variable cache
var tickerObj; // global tickerObj cache
var hex = 255;
function fadeText(divId) {
if(tickerObj)
{
if(hex>0) {
hex-=5; // increase color darkness
tickerObj.style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadeText('" + divId + "')", fadeSpeed);
} else
hex=255; //reset hex value
}
}
function initialiseList(divId) {
tickerObj = document.getElementById(divId);
if(!tickerObj)
reportError("Could not find a div element with id \"" + divId + "\"");
list = tickerObj.childNodes;
if(list.length <= 0)
reportError("The div element \"" + divId + "\" does not have any children");
for (var i=0; i<list.length; i++) {
var node = list[i];
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
tickerObj.removeChild(node);
}
run(divId, 0);
}
function run(divId, count) {
fadeText(divId);
list[count].style.display = "block";
if(count > 0)
list[count-1].style.display = "none";
else
list[list.length-1].style.display = "none";
count++;
if(count == list.length)
count = 0;
window.setTimeout("run('" + divId + "', " + count+ ")", interval*1000);
}
function reportError(error) {
alert("The script could not run because you have errors:\n\n" + error);
return false;
}
var interval = 7; // interval in seconds
var fadeSpeed = 40; // fade speed, the lower the speed the faster the fade. 40 is normal.
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="tic">
<h1>Welcome to The JavaScript Source ...</h1>
<p>
The JavaScript Source is a part of Jupitermedia, in the Web Developer channel of
the internet.com network.</p>
<p>
All the scripts on this site are free for personal or business use.</p>
<p>
The only requirement is that you leave the credit information inside the script.</p>
<h2>JavaScripts</h2>
<p>
JavaScript programs are contained within the HTML code of the Web page and are
interpreted by the browser as it's read.</p>
<p>
JavaScript provides greater flexibility through such luxuries as being able to
create windows, display moving text, sound or other multimedia elements with
relative ease.</p>
<h2>Some Basics</h2>
<p>
JavaScript is not Java; it is an object-based scripting language; and it is
cross-platform.
</p>
</div>
<script type="text/javascript">
<!--
initialiseList("tic");
//-->
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->