Cross Fading News Ticker

	Print
	Email

Submitted on: 7/22/2002 6:29:36 AM
By: Nick Radford
Level: Intermediate
User Rating:

By 30 Users
Compatibility:JavaScript

Users have accessed this code 10344 times.

A new approach to displaying a news ticker. This script will smoothly fade one news headline in to another. Works on IE,NS4&NS6;

code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!

Terms of Agreement:
By using this code, you agree to the following terms...
1) You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
2) You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3) You may link to this code from another website, but ONLY if it is not wrapped in a frame.
4) You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.


//**************************************
//     
// Name: Cross Fading News Ticker
// Description:A new approach to display
//     ing a news ticker. This script will smoo
//     thly fade one news headline in to anothe
//     r. Works on IE,NS4&NS6;
// By: Nick Radford
//
// Inputs:Enter your ticker items/news h
//     eadlines into the JavaScript array (News
//     Array) at the top of the code.
//
//This code is copyrighted and has// limited warranties.Please see http://
//     www.Planet-Source-Code.com/vb/scripts/Sh
//     owCode.asp?txtCodeId=3065&lngWId;=2//for details.//**************************************
//     

<HTML>
<HEAD>
<TITLE>Cross Fading News Ticker</TITLE>
<style>
<!--
a{text-decoration:none;}
-->
</style>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
//Cross Fading News Ticker - Copyright (
//     c) 2002, Nick Radford
//Use this script as you want... though 
//     give me credit for it!
NewsDelay=3000		//Time each story is displayed for
NewsFadeDelay=1000	//Time taken to fade from one story to the next
NewsFont='Arial'	//Ticket font family
NewsFontSize='4'	//Ticket font size
NewsTextColor=new Array("#000000","#111111","#222222","#333333","#444444","#555555","#666666","#777777","#888888","#999999","#aaaaaa","#bbbbbb","#cccccc","#dddddd","#eeeeee","#ffffff")
NewsStory=0		//Working Variable
LastNewsStory=0		//Working Variable
NewsColor=0		//Working Variable
NewsArray=new Array(
	'Cross Fading News Ticker. <BR>Copyright © 2002, Nick Radford' , 'http://www.URL1.com',
	'Place any text you want into the JavaScript array at the top of this script' , 'http://www.URL2.com',
	'And this script will smoothly fade from one text entry...' , 'http://www.URL3.com',
	'Into the next one..!' , 'http://www.URL4.com',
	'You can also define hyperlinks for each ticker entry' , 'http://www.URL5.com',
	'Dont forget... <BR>if you like this script<BR>vote for me..!' , 'http://www.URL6.com',
	'')
    function DisplayNews(){
    	LastNewsStory=NewsStory
    	NewsStory++; if( NewsStory>(Math.floor(NewsArray.length/2)) ){NewsStory=1}
    	FadeNews()
}


    function FadeNews(){
    	if (NewsColor<(NewsTextColor.length)/2){var NewsLayer=1}
    	else {var NewsLayer=2}
    	//Old Story
        	if (LastNewsStory>0){
        		var NewsText = '<A href="'+ NewsArray[(LastNewsStory-1)*2+1] +'"><FONT color="'+ NewsTextColor[NewsColor] +'" face="'+ NewsFont +'" size="'+ NewsFontSize +'">'+ NewsArray[(LastNewsStory-1)*2] +'</FONT></A>'
        			if(document.layers){ document.eval('newslayer'+(3-NewsLayer)).document.write(NewsText); document.eval('newslayer'+(3-NewsLayer)).document.close() }//NN4
        			if(document.all){ eval('newslayer'+(3-NewsLayer)).innerHTML=NewsText }//IE
        			if(!document.all && document.getElementById){ document.getElementById('newslayer'+(3-NewsLayer)).innerHTML=NewsText }//NN6
        	}
        	//New Story
        		var NewsText = '<A href="'+ NewsArray[(NewsStory-1)*2+1] +'"><FONT color="'+ NewsTextColor[(NewsTextColor.length)-NewsColor-1] +'" face="'+ NewsFont +'" size="'+ NewsFontSize +'">'+ NewsArray[(NewsStory-1)*2] +'</FONT></A>'
        			if(document.layers){ document.eval('newslayer'+NewsLayer).document.write(NewsText); document.eval('newslayer'+NewsLayer).document.close() }//NN4
        			if(document.all){ eval('newslayer'+NewsLayer).innerHTML=NewsText }//IE
        			if(!document.all && document.getElementById){ document.getElementById('newslayer'+NewsLayer).innerHTML=NewsText; }//NN6
        	NewsColor++
        	if (NewsColor>=NewsTextColor.length){ NewsColor=0; setTimeout('DisplayNews()',NewsDelay) }
        	else { setTimeout('FadeNews()',NewsFadeDelay/NewsTextColor.length) }
    }

    //-->
    </SCRIPT>
    </HEAD>
    <BODY bgcolor="#ffffff" onload="DisplayNews()">
    	<DIV id="newslayer1" style="position:absolute; left:20; top:20; width:300; height:200; z-index:1; visibility:visible;"> </DIV>
    	<DIV id="newslayer2" style="position:absolute; left:20; top:20; width:300; height:200; z-index:2; visibility:visible;"> </DIV>
    </BODY>
    </HTML>

Other 4 submission(s) by this author

Report Bad Submission

Your Vote!

Other User Comments

7/22/2002 11:12:10 AM:Bjoern

Nice script Nick. I have also created 
an asp-version of your script with a 
accees db in back end.

7/22/2002 2:23:47 PM:Nick Radford

Cool.
I initially designed this for 
use with an ASP/SQL feed, but decided 
to post it as a standard Javascript 
function.
That way people can use it 
with or without ASP..!

7/26/2002 3:30:22 AM:Thushan Fernando

hey nick! Great script... we are 
working on an editor called HotHTML 
3[http://hothtml3beta.wsoftware.net/] 
and are snooping around for scripts we 
can add to the editor(externally) so 
our users can add it to their site... 
do you mind if we use this? Please 
email me... thushan@wsoftware.net and 
tell me what you think. You will have 
to include your details on the 
script(Inc copyright) so you get credit 
for it.

7/26/2002 1:23:54 PM:Harry Baxter

WOW!!! Great coding - I love it. High 5 
from me.!

7/28/2002 5:29:02 PM:Tommy Carter

Nick, you are the man! 
I have 
converted this to display from an 
access database on out 
intranet.
Thanks, this is great.

9/24/2002 11:19:08 AM:

I need help (i.e. code) for getting 
this ticker to work with ASP/VBScript, 
feeding from and Access DB. My email 
is: 
mullenismyhero@yahoo.com
THANKS!!!

12/19/2002 1:07:34 AM:

I love your script and rated it tops 
I would love to use this script using 
a access data base do you havea  
example of that I would sure like it 
email address is dedwards@calcot.com

3/11/2003 5:02:37 AM:Rickard Sjöquist

Nice pice of code i love it! I'm 
impressed!

10/29/2003 6:45:35 PM:ÇrèèÞingÐè†h¹º¹™

Keep rockin the world with great 
coding!  This is the best I've ever 
come across.

Add Your Feedback!

Note:Not only will your feedback be posted, but an email will be sent to the code's author in your name.

NOTICE: The author of this code has been kind enough to share it with you. If you have a criticism, please state it politely or it will be deleted.

For feedback not related to this particular code, please click here.