...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum