Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript News Ticker

    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!!

  • #2
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    OracleGuy

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    How about this - we usually include on the page as an iframe as:

    Code:
    <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:

    Code:
    <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>

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi - cheers willy!!

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

  • #10
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #11
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •