PDA

View Full Version : JavaScript News Ticker



holty
10-07-2003, 03:53 PM
Hi,

I'm looking for a javascript that will work as a horizonal news ticker...

Can this be done as a js file with arrays of text in?

I'm confused how to write this and have looked on teh web for a news ticker but only found java applet ones....

Any help would be great!!

oracleguy
10-07-2003, 04:53 PM
Well, here is some js options: http://www.javascriptkit.com/script/cutindex3.shtml

holty
10-08-2003, 10:07 AM
hi

thanks for the reply....

looked at all of them on that page - none are suitable as I need it to scroll across the page like a marquee....

Some of the message that will be displayed may be long and don't include hyperlinks...

have you any more links for me to look at?

Spudhead
10-08-2003, 10:55 AM
How about this - we usually include on the page as an iframe as:



<td>
<IFRAME id="tickerframe" frameborder="0" border="0" src="ticker.asp" width="800" height="18" marginheight="0" marginwidth="0" scrolling="no"></IFRAME></td>


ticker.asp:



<HTML>
<HEAD>
<TITLE></TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">
var mArray = new Array();

mArray[0] = new Object();
mArray[0].title = "This is link 1";
mArray[0].url = "http://www.google.com";

mArray[1] = new Object();
mArray[1].title = "This is not a link";
mArray[1].url = "";

mArray[2] = new Object();
mArray[2].title = "This is link 2";
mArray[2].url = "www.codingforums.com";
</script>

<STYLE type="text/css">
<!--
td,a,a:visited {
color: #27B7FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #99CCFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration: none;
background-color: #0f5fc2;
}
-->
</STYLE>

<SCRIPT language="JavaScript1.2" type='text/javascript'>
<!--
function createTicker(ticker) {
theHTML='<TABLE border="0" cellpadding="0" cellspacing="0" width="100%" id="mainTable">';
theHTML=theHTML+'<tr>';
theHTML=theHTML+'<td nowrap><IMG src="images/p.gif" width="611" height="1"></td>';
for (var x=0 ; x<ticker.length ; x++) {
theHTML=theHTML+'<td nowrap><IMG src="images/bullet1.gif" width="5" height="5" hspace="10" border="0"></td>';
theHTML=theHTML+'<td nowrap><A href="'+ ticker[x].url +'" target="_top" title="CLICK FOR DETAILS: '+ ticker[x].title +'">'+ ticker[x].title +'</A></td>';
}
theHTML=theHTML+'<td nowrap><IMG src="images/bullet1.gif" width="5" height="5" hspace="10" border="0"></td>';
theHTML=theHTML+'<td nowrap><IMG src="images/p.gif" width="611" height="1"></td>';
for (var x=0 ; x<ticker.length ; x++) {
theHTML=theHTML+'<td nowrap><IMG src="images/bullet1.gif" width="5" height="5" hspace="10" border="0"></td>';
theHTML=theHTML+'<td nowrap><A href="'+ ticker[x].url +'" target="_top" title="CLICK FOR DETAILS: '+ ticker[x].title +'">'+ ticker[x].title +'</A></td>';
}
theHTML=theHTML+'<td nowrap><IMG src="images/bullet1.gif" width="5" height="5" hspace="10" border="0"></td>';
theHTML=theHTML+'</tr></TABLE>';
document.write(theHTML);
}
//-->
</SCRIPT>
</HEAD>

<BODY bgcolor="#0051A2" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<SCRIPT language="JavaScript1.2" type='text/javascript'>
<!--
var moveBy=0;
var speed=defaultSpeed=2;
document.write('<DIV id="tickerLayer" style="position:absolute; left:0px; top:1px;" onMouseover="speed=0" onMouseout="speed=defaultSpeed">');
createTicker(mArray);
document.write('</DIV>');
function initTicker() {
tickerObj=document.all? document.all.tickerLayer : document.getElementById("tickerLayer");
tickerObj.style.left='1px';
if (document.all) {
moveBy = Math.floor(((parseInt(tickerObj.offsetWidth))/2))
}
else {
moveBy = Math.floor(((parseInt(document.getElementById('mainTable').offsetWidth))/2))
}
startMove=moveBy;
scrollNow();
}
function scrollNow() {
moveBy = moveBy - speed;
tickerObj.style.left=parseInt(tickerObj.style.left)-speed;
if (moveBy<=speed+1) {
tickerObj.style.left=1-speed;
moveBy = startMove;
}
setTimeout("scrollNow()",20)
}
window.onload=initTicker;
//-->
</SCRIPT>
</BODY>
</HTML>

Willy Duitt
10-08-2003, 12:24 PM
Here's a simple Marquee Scroller script:


<script type="text/javascipt">

//Specify the marquee's width (in pixels)
var marqueewidth=500

//Specify the marquee's height
var marqueeheight=30

//Specify the marquee's scroll speed (larger is faster)
var speed=1

//Specify the marquee contents
var marqueecontents=('<font face="Verdana" size="5" font color="#0000FF"><small>Hello! Welcome To My Web Site! My Web Site Name</small></font>');

if (document.all)
document.write('<marquee direction="left" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>')
function regenerate(){
window.location.reload()
}

function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.height
scrollit()
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=speed
setTimeout("scrollit()",100)
}

else{
document.cmarquee01.document.cmarquee02.top=marqueeheight
scrollit()
}
}
window.onload=regenerate2
</script>

holty
10-08-2003, 02:26 PM
cheers - thats exactly what I want but....

the horizontal scroll bar goes a little mad, it keeps changing it size as the ticker moves.... does this happen on yours?

holty
10-29-2003, 04:35 PM
this is like what i need - on mouse over it will stop. Also I would want it to be continuous and not keep stoping after every sentance....

any1 seen this script about?

Willy Duitt
10-29-2003, 07:49 PM
Try these changes:

<script type="text/javascript">
// Specify the marquee's width (in pixels)
var marqueewidth=500
// Specify the marquee's height
var marqueeheight=30
// Specify the marquee's scroll speed (larger is faster)
var speed=1
// Specify your message
var mycontents=('Hello Guest Welcome to my Website! ');

str = mycontents
str = str+str+str+str+str
str = str+str+str+str+str
var marqueecontents = str

if (document.all)
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>');

function regenerate(){
window.location.reload()
}

function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450);
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(marqueecontents);
document.cmarquee01.document.cmarquee02.document.close();
thelength=document.cmarquee01.document.cmarquee02.document.height;
scrollit();
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=speed;
setTimeout("scrollit()",100);
}

else{
document.cmarquee01.document.cmarquee02.top=marqueeheight;
scrollit();
}
}
window.onload=regenerate2
</script>


.....Willy

holty
10-30-2003, 11:00 AM
hi - cheers willy!!

How could I run it in a <td> tag and also how could I change the color of the text?

Willy Duitt
10-30-2003, 01:56 PM
Try this: ;)

<table bgcolor = "#000000"
border = "0"
cellpadding = "0"
cellspacing = "0"
width = "500"
align = "center">
<tr>
<td width = "500"
valign = "middle"
align = "center">


<script type="text/javascript">
// Specify the marquee's width (in pixels)
var marqueewidth=500
// Specify the marquee's height
var marqueeheight=30
// Specify the marquee's scroll speed (larger is faster)
var speed=1
// Specify your message
var mycontents=('<font color="#FF0000">Hello Guest Welcome to my Website! </font>');

str = mycontents
str = str+str+str+str+str
str = str+str+str+str+str
var marqueecontents = str

if (document.all)
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>');

function regenerate(){
window.location.reload()
}

function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450);
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(marqueecontents);
document.cmarquee01.document.cmarquee02.document.close();
thelength=document.cmarquee01.document.cmarquee02.document.height;
scrollit();
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=speed;
setTimeout("scrollit()",100);
}

else{
document.cmarquee01.document.cmarquee02.top=marqueeheight;
scrollit();
}
}
window.onload=regenerate2
</script>


</td>
</tr>
</table>



.....Willy

Cheong
01-02-2008, 06:51 AM
The above for the continuous ticker script only run in IE browser and not in others like Firefox. Is there any script for other browsers too. Thanks.