Login
Important alert: (current site time 7/15/2013 1:46:22 PM EDT)
 

VB icon

Cross Fading News Ticker

 Email
Submitted on: 7/22/2002 6:29:36 AM
By: Nick Radford 
Level: Intermediate
User Rating: By 1 Users
Compatibility: JavaScript
Views: 36907
(About the author)
 
     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 displaying a news ticker. This script will smoothly fade one news headline in to another. Works on IE,NS4&NS6
' By: Nick Radford
'
' Inputs:Enter your ticker items/news headlines into the JavaScript array (NewsArray) at the top of the code.
'
'This code is copyrighted and has' limited warranties.Please see http://www.Planet-Source-Code.com/vb/scripts/ShowCode.asp?txtCodeId=3065&lngWId=14'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 5 submission(s) by this author

 
Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:
Your Vote

What do you think of this code (in the Intermediate category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 
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.
(If this comment was disrespectful, please report it.)
 
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..!
(If this comment was disrespectful, please report it.)
 
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.
(If this comment was disrespectful, please report it.)
 
7/26/2002 1:23:54 PM: Harry Baxter

WOW!!! Great coding - I love it. High 5 from me.!
(If this comment was disrespectful, please report it.)
 
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.
(If this comment was disrespectful, please report it.)
 
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!!!
(If this comment was disrespectful, please report it.)
 
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
(If this comment was disrespectful, please report it.)
 
3/11/2003 5:02:37 AM: Rickard Sjöquist

Nice pice of code i love it! I'm impressed!
(If this comment was disrespectful, please report it.)
 
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.
(If this comment was disrespectful, please report it.)
 
6/3/2004 7:00:31 AM: 

how do u re position the news fader???
(If this comment was disrespectful, please report it.)
 
6/3/2004 7:01:36 AM: 

Dont worry found it lol
(If this comment was disrespectful, please report it.)
 
7/27/2005 3:53:04 PM: Jan

Code looks very great on a white page!
But, How can it be used on coloured pages? e.a. Dark blue..
It changes from white to black and leaves the old text on screen. Maybe a simple change can make it universal??
Thanks
(If this comment was disrespectful, please report it.)
 
7/28/2005 9:45:28 AM: Nick Radford

Hi Jan,
The tickers colour transition is defined in the array ( NewsTextColor ) near the top of the script.
Changing the values in this array will change the colours that the ticker will cycle through, e.g. ("#ffffff","#eeeeff","#ddddff"... thru ..."#2222ff","#1111ff","#0000ff") will cycle the ticker from dark blue to white.
With a little experimentation the ticker can even cycle through the colours of the rainbow!

(If this comment was disrespectful, please report it.)
 
9/1/2007 12:43:07 PM: Am9e

Hello, GREAT CODE, thank you so much

PLEASE let me know how to use this script with ASP news page all with headlines one after one as table..

my email is stored in my account

THANK YOU SO MUCH
(If this comment was disrespectful, please report it.)
 
12/16/2007 12:34:10 PM: Romil Lopez

great script man! found this just in time to update one of my sites. i hope you don't mind me modifying and using your script. i had to modify it a bit to compliment the metallic design of my site. credits to you man! thanx a lot! c",)
(If this comment was disrespectful, please report it.)
 
12/21/2007 5:51:29 AM: Nick Radford

Hi Romil,
Glad you liked the code, feel free to modify it as needed...
(If this comment was disrespectful, please report it.)
 
Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular code, please click here instead.)
 

To post feedback, first please login.

Search:

Newest postings for Javascript.

Add this ticker to my site

Daily code email

Click here to join the 'Code of the Day' mailing list!

This site on CD

Over 7,000 submissions on a super fast CD!

Code/Articles

Top Code

Community

Jobs

Other

Goto…

Copyright© 1997-2013 by Exhedra Solutions, Inc. All Rights Reserved.
By using this site you agree to its Terms and Conditions. Planet Source Code™ and the phrase "Dream It. Code It"™ are trademarks of Exhedra Solutions, Inc.