JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



News Updater Script

A "news updater" that rotates among different messages. Infinite number of messages can be added to the updater. This script uses a special mechanism to dynamically determine the height of the longest message, and sets itself to match this height. Browsers other than IE 4.x will simply see nothing.


Insert into <HEAD>
<script> <!-- function correct(){ if (finished){ setTimeout("begin()",3000) } return true } window.onerror=correct function begin(){ if (!document.all) return if (maxheight==null) maxheight=temp.offsetHeight whatsnew.style.height=maxheight temp.style.display="none" c=1 finished=true change() } //--> </script> <style> <!-- #whatsnew a{color:730073;text-decoration:none} #whatsnew, #temp {font-weight:bold; font-family:Arial} #whatsnew a:hover{color:red} --> </style>

Insert into <BODY>
<body onLoad="begin()"> <script language="javascript1.2"> <!-- var head='' var top=0 var maxheight var finished=false var tickers=new Array() tickers[0]='<a href="0.htm">This is message 0</a>' tickers[1]='<a href="1.htm">This is message 1</a>' tickers[2]='<a href="2.htm">This is message 2.</a>' tickers[3]='<a href="3.htm">This is message 3.</a>' tickers[4]='<a href="4.htm">This is message 4.</a>' for (i=1;i<=tickers.length-1;i++){ if (tickers[i].length>=tickers[top].length) top=i } if (document.all) document.write('<span id="whatsnew" style="width:100%;height=10;filter:revealTrans(duration=2,transition=19)">'+tickers[0]+'</span>') function change(){ whatsnew.innerHTML='' whatsnew.filters.revealTrans.apply() whatsnew.filters.revealTrans.play() whatsnew.innerHTML=tickers[c] if (c==tickers.length-1) c=0 else c+=1 setTimeout("change()",5000) } if (document.all) document.write('<span id=ns style="display:none;">') //--> </script> <!--Insert alternate HTML codes here that will be seen by browsers OTHER than IE 4.x--> </span> <span id=temp style="position:absolute;left:0;top:0" style=&{head};> <script> <!-- if (document.all){ temp.style.width=whatsnew.style.width document.write(tickers[top]) } //--> </script> </span><br>

Other Options
Step 3: Finally, add the below into the <body> tag itself, like this: <body onLoad="begin()"> Configuring the updater Changing the text appearance: You can configure the text appearance of the updater in two ways. To change the font color, go to the code in Step 1. Find the line: #whatsnew a{color:730073;text-decoration:none} near the buttom of the code, and change 730073 to another color . To change the font type, find the line: #whatsnew, #temp {font-weight:bold; font-family:Arial} and change "Arial" to another font type. Adding additional messages: By default, the Updater accomodates 5 messages. This is by no means a hard-coded number. Inside the code of Step 2, you see: " tickers[0]='<a href="0.htm.htm">This is message 0</a>' tickers[1]='<a href="1">This is message 1</a>' " To add additional messages, simply add more of tickers[0]='<a href="0.htm">This is message 0</a>' with "0" changed to reflect the number of the current message. Subsequently, you can delete messages simply by removing it from the list. Note 1: As mentioned in Step 2, you should insert the News Updater in a table column that has a controlled width (like in the demo). This is due to the fact that the Updater automatically expands to span the entire width of whatever is containing it. Inserting it in open space (as opposed to a table column) means the Updater will span the entire width of the document, which, for the most part, is not what we want. Note 2: The News Updater was designed for IE 4.x...all other browsers will simply see no text at all, as if the Updater didn't exist. You can add in alternate HTML text to be shown for these browsers by inserting it in the location documented in the code in Step 2.