• 0

How do I make a news ticker like...


Question

http://news.bbc.co.uk/

If you go there, the top of the page where it says "LATEST: bla bla bla" How do I make a horizontal news ticker like that. I've found other ones that scroll across the page slowly, but ideally I'd prefer to be able to have the ticker 'reveal' the news from the left hand side just like that one on the BBC Website does.

Anyone got any helpful tutorials or advice on how to create one like that?

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Looking at the source, they use JS to dynamically re-write the html.

Maybe you could adapt their function?

// Ticker startup
4function startTicker()
5{
6 // Define run time values
7 theCurrentStory = -1;
8 theCurrentLength = 0;
9 // Locate base objects
10 if (document.getElementById) {
11 theAnchorObject = document.getElementById("tickerAnchor");
12 runTheTicker();
13 }
14 else {
15 document.write("<style>.ticki{display:none;}.ticko{border:0px; padding:0px;}</style>");
16 return true;
17 }
18}
19// Ticker main run loop
20function runTheTicker()
21{
22 var myTimeout;
23 // Go for the next story data block
24 if(theCurrentLength == 0)
25 {
26 theCurrentStory++;
27 theCurrentStory = theCurrentStory % theItemCount;
28 theStorySummary = theSummaries[theCurrentStory].replace(/"/g,'"');
29 theTargetLink = theSiteLinks[theCurrentStory];
30 theAnchorObject.href = theTargetLink;
31 thePrefix = "<span class=\"tickls\">" + theLeadString + "</span>";
32 }
33 // Stuff the current ticker text into the anchor
34 theAnchorObject.innerHTML = thePrefix +
35 theStorySummary.substring(0,theCurrentLength) + whatWidget();
36 // Modify the length for the substring and define the timer
37 if(theCurrentLength != theStorySummary.length)
38 {
39 theCurrentLength++;
40 myTimeout = theCharacterTimeout;
41 }
42 else
43 {
44 theCurrentLength = 0;
45 myTimeout = theStoryTimeout;
46 }
47 // Call up the next cycle of the ticker
48 setTimeout("runTheTicker()", myTimeout);
49}

Link to comment
Share on other sites

  • 0

The following (and above) may be of some use:

News Ticker 01:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>News Ticker</title>
</head>

<body>

<form name="news">
<textarea name="news2" cols=40 rows=4 wrap=virtual></textarea>
</form>

<script language=JavaScript>

var newsText = new Array();
newsText[0] = "Typing Text JScript v1\nDeveloped on Sunday, April 15th, 2001...";
newsText[1] = "This is a text-typing DHTML demo. \nScript featured on http://javascriptkit.com";
newsText[2] = "Make sure you read the comments before you configure the script...";
newsText[3] = "Programmed by: Haitham Al-Beik...\n\nCopyright (c) Haitham M. Al-Beik, 2001";
newsText[4] = "http://www.prosheet.com/DHTML/typetext.htm"

var ttloop = 1;	// Repeat forever? (1 = True; 0 = False)
var tspeed = 60;   // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds

// ------------- NO EDITING AFTER THIS LINE ------------- \\
var dwAText, cnews=0, eline=0, cchar=0, mxText;

function doNews() {
  mxText = newsText.length - 1;
  dwAText = newsText[cnews];
  setTimeout("addChar()",1000)
}
function addNews() {
  cnews += 1;
  if (cnews <= mxText) {
	dwAText = newsText[cnews];
	if (dwAText.length != 0) {
	  document.news.news2.value = "";
	  eline = 0;
	  setTimeout("addChar()",tspeed)
	}
  }
}
function addChar() {
  if (eline!=1) {
	if (cchar != dwAText.length) {
	  nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
	  document.news.news2.value = nmttxt;
	  cchar += 1;
	  if (cchar != dwAText.length) document.news.news2.value += "_";
	} else {
	  cchar = 0;
	  eline = 1;
	}
	if (mxText==cnews && eline!=0 && ttloop!=0) {
	  cnews = 0; setTimeout("addNews()",tdelay);
	} else setTimeout("addChar()",tspeed);
  } else {
	setTimeout("addNews()",tdelay)
  }
}

doNews()
</script>

</body>
</html>

News Ticker (fader) 02:

<script language=JavaScript1.2 type=text/javascript>
<!--
var delay = 1500;
var bcolor = "EEEEEE"
var tcolor = "111111"
begintag = '<font size="2"><font face="Verdana"><B>'
var fcontent = new Array()
fcontent[0] = "Welcome to Wizzy World!"
fcontent[1] = "Recent News will appear here"
fcontent[2] = "Site Launched!"
fcontent[3] = "Please Read the Copyright Information"

closetag = '</b></font>'

var frame = 50;
var st = 30;
var wait = 1;

ie4 = document.all&&!document.getElementById;
ns4 = document.layers;
DOM2 = document.getElementById;

bR = HexToR(bcolor);
bG = HexToG(bcolor);
bB = HexToB(bcolor);
tR = HexToR(tcolor);
tG = HexToG(tcolor);
tB = HexToB(tcolor);
bR_m = bR;
bG_m = bG;
bB_m = bB;
tR_m = tR;
tG_m = tG;
tB_m = tB;

function HexToR(h) { return parseInt((cutHex(h)).substring(0,2),16) }
function HexToG(h) { return parseInt((cutHex(h)).substring(2,4),16) }
function HexToB(h) { return parseInt((cutHex(h)).substring(4,6),16) }
function cutHex(h) { return (h.charAt(0)=="#") ? h.substring(1,7) : h}

dir = ((tR+tG+tB) > (bR+bG+bB)) ? "up" : "down";
dirback = ((tR+tG+tB) < (bR+bG+bB)) ? "up" : "down";
dir_m = dir;
index = 0;
frame_m = frame;
framehalf = frame / 2;
wait_m = wait;
stepR = Math.abs(tR - bR) / framehalf;
stepG = Math.abs(tG - bG) / framehalf;
stepB = Math.abs(tB - bB) / framehalf;
step = Math.min(Math.round(Math.max(stepR,Math.max(stepG,stepB))),(240/framehalf));

function fade() {
if (index>=fcontent.length)
	index = 0;
if (DOM2) {
	document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag;
	index++;
	colorfade();
	}
else if (ie4) {
	document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
	index++;
	setTimeout("fade()",delay);
	}
else if (ns4) {
	document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag);
	document.fscrollerns.document.fscrollerns_sub.document.close();
	index++;
	setTimeout("fade()",delay);
	}
}

function colorfade() {
if (frame>0) {
	if (frame==framehalf && wait>0) {
		document.getElementById("fscroller").style.color="rgb("+wR+","+wG+","+wB+")";
		wait--;
		setTimeout("colorfade()",delay);
		}
	else {
		if (dir=="down") {
			if (bR>tR) bR-=step;
			if (bG>tG) bG-=step;
			if (bB>tB) bB-=step;
			bR = Math.max(bR,1);
			bG = Math.max(bG,1);
			bB = Math.max(bB,1);
			}
		else {
			if (bR<tR) bR+=step;
			if (bG<tG) bG+=step;
			if (bB<tB) bB+=step;
			bR = Math.min(bR,255);
			bG = Math.min(bG,255);
			bB = Math.min(bB,255);
			}
		document.getElementById("fscroller").style.color="rgb("+bR+","+bG+","+bB+")";
		if (frame==framehalf+1) {
			document.getElementById("fscroller").style.color="rgb("+tR+","+tG+","+tB+")";
			dir = dirback;
			wR = tR;
			wG = tG;
			wB = tB;
			tR = bR_m;
			tG = bG_m;
			tB = bB_m;
			}
		frame--;
		setTimeout("colorfade()",st);
		}
	}
else {
	document.getElementById("fscroller").innerHTML=" ";
	dir = dir_m;
	frame = frame_m;
	wait = wait_m;
	tR = tR_m;
	tG = tG_m;
	tB = tB_m;
	bR = bR_m;
	bG = bG_m;
	bB = bB_m;
	setTimeout("fade()",st);
	}
}

if (navigator.appVersion.substring(0,1) < 5 && navigator.appName == "Netscape") {
var fwidth = screen.availWidth / 2;
var bwidth = screen.availWidth / 4;
document.write('<ilayer id="fscrollerns" width='+fwidth+' height=35 left='+bwidth+' top=0><layer id="fscrollerns_sub" width='+fwidth+' height=35 left=0 top=0></layer></ilayer>');
window.onload = fade;
}
else if (navigator.userAgent.search(/Opera/) != -1 || (navigator.platform != "Win32" && navigator.userAgent.indexOf('Gecko') == -1)) {
document.open();
document.write('<div id="fscroller" style="width:90% height:15px; padding:2px">');
for(i=0; i < fcontent.length; ++i) {
document.write(begintag+fcontent[i]+closetag+'<br>');
}
document.write('</div>');
document.close();
window.onload = fade;
}
else {
document.write('<div id="fscroller" style="width:90% height:15px; padding:2px"></div>');
window.onload = fade;
}
// -->
				  </SCRIPT>

News Ticker 03:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!-- saved from url=(0032)http://www.creamhackered.com/404 -->

<HTML><HEAD><TITLE>Wrong Page - Lost File</TITLE>

<META http-equiv=Content-Type content="text/html; charset=windows-1252">

<STYLE>BODY {

	SCROLLBAR-FACE-COLOR: #53616c; SCROLLBAR-HIGHLIGHT-COLOR: #53616c; SCROLLBAR-SHADOW-COLOR: #53616c; SCROLLBAR-3DLIGHT-COLOR: #53616c; SCROLLBAR-ARROW-COLOR: #53616c; SCROLLBAR-TRACK-COLOR: #53616c; SCROLLBAR-DARKSHADOW-COLOR: #53616c

}

</STYLE>



<script language=Javascript><!--
var tl=new Array(

"Wrong Page - Lost File.",
'No /404 here.',
"Even tried multi.",
"Nothing helped.",
"I'm really depressed about this.",
"You see, I'm just a web server...",
"-- here I am, brain the size of the universe,",
"trying to serve you a simple web page,",
"and then it doesn't even exist!",
"Where does that leave me?!",
"I mean, I don't even know you.",
"How should I know what you wanted from me?",
"You honestly think I can *guess*",
"what someone I don't even *know*",
"wants to find here?",
"*sigh*",
"Man, I'm so depressed I could just cry.",
"And then where would we be, I ask you?",
"It's not pretty when a web server cries.",
"And where do you get off telling me what to show anyway?",
"Just because I'm a web server,",
"and possibly a manic depressive one at that?",
"Why does that give you the right to tell me what to do?",
"Huh?",
"I'm so depressed...",
"I think I'll crawl off into the trash can and decompose.",
"I mean, I'm gonna be obsolete in what, two weeks anyway?",
"What kind of a life is that?",
"Two effing weeks,",
"and then I'll be replaced by a .01 release,",
"that thinks it's God's gift to web servers,",
"just because it doesn't have some tiddly little",
"security hole with its HTTP POST implementation,",
"or something.",
"I'm really sorry to burden you with all this,",
"I mean, it's not your job to listen to my problems,",
"and I guess it is my job to go and fetch web pages for you.",
"But I couldn't get this one.",
"I'm so sorry.",
"Believe me!",
"Maybe I could interest you in another page?",
"There are a lot out there that are pretty neat, they say,",
"although none of them were put on *my* server, of course.",
"Figures, huh?",
"That makes me depressed too, since I have to serve them,",
"all day and all night long.",
"Two weeks of information overload,",
"and then *pffftt*, consigned to the trash.",
"What kind of a life is that?",
"Now, please let me sulk alone.",
"I'm so depressed."
);
var speed=60;
var index=0; text_pos=0;
var str_length=tl[0].length;
var contents, row;

function type_text()
{
  contents='';
  row=Math.max(0,index-7);
  while(row<index)
	contents += tl[row++] + '\r\n';
  document.forms[0].elements[0].value = contents + tl[index].substring(0,text_pos) + "_";
  if(text_pos++==str_length)
  {
	text_pos=0;
	index++;
	if(index!=tl.length)
	{
	  str_length=tl[index].length;
	  setTimeout("type_text()",1500);
	}
  } else
	setTimeout("type_text()",speed);

}
//--></SCRIPT>



<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>

<BODY text=#929da3 bgColor=#53616c onload=type_text()>

<CENTER> 

<FORM><TEXTAREA style="BORDER-RIGHT: #53616c 1px solid; BORDER-TOP: #53616c 1px solid; BORDER-LEFT: #53616c 1px solid; COLOR: #929da3; BORDER-BOTTOM: #53616c 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #53616c" rows=8 cols=65></TEXTAREA> 

</FORM>

<P align=center><FONT face=Verdana size=2>Powered by...</FONT><BR><IMG height=70 

src="zzz_images/dotnet.jpg" width=413 

border=0></P></CENTER></BODY></HTML>

The last one was saved from http://www.creamhackered.com/404 <-- Cream Hackered homepage. He is a News Md here I believe?

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.