Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library


Category: Javascript Codes Library >> News Ticker & Marquees >> News Scroller

Code Snippet </> Info

Snippet Name: News Scroller

Description: Easily add a news scroller with this code snippet.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note: View the comment notes within the source code for adjustment instructions.

Author: Robert Suppenbach

Last Modified: 2015-08-26 23:39:25

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor

  About Copying

<html> <head> <title>News Scroller Javascript Code Snippet</title> <style> BODY {font-family:verdana,arial,ms sans serif; font-size:90%;} .newsTxt1 {font-size:.8em; font-family:verdana, helvetica, arial, sans-serif;} .newsTxt2 {font-size:1em; font-family:verdana, helvetica, arial, sans-serif; font-weight:bold;} </style> <script> <!-- /* // Begin News Scroller // == This Script Free To Use Providing This Notice Remains == // == This Script Has Been Found In The Free Public Codes Library == // == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == // == Created by: Robert Suppenbach : : Creative Commons License == */ var toScroll=new Array() var ie=document.all var dom=document.getElementById var firstNews_obj; var secondNews_obj; function newsScroll(name){ var c=this;;; c.i=2; return this; } newsScroll.prototype.addItem = function(text,link,font,fontSize,fontStyle){ var c = this; if (link !=''){ if (font != '') toScroll[]="<a href='"+link+"'><font face='"+font+"' size='"+fontSize+"' Class='"+fontStyle+"'>"+text+"</font></a>"; else toScroll[]="<a href='"+link+"'><font Class='"+fontStyle+"'>"+text+"</font></a>"; } else { if (font != '') toScroll[]="<font face='"+font+"' size='"+fontSize+"' Class='"+fontStyle+"'>"+text+"</font>"; else toScroll[]="<font Class='"+fontStyle+"'>"+text+"</font>"; }; } newsScroll.prototype.construct = function(){ var c = this; theWidth = c.scrollerwidth; theHeight=c.scrollerheight; thebgColor = c.scrollerbgcolor; theBackground =c.scrollerbackground; theDelay=c.scrollerdelay; scroll_obj=eval(; if (ie||dom){ document.writeln('<div id="main2" style="position:relative;width:'+theWidth+';height:'+theHeight+';overflow:hidden;background-color:'+thebgColor+' ;background-image:url('+theBackground+')">') document.writeln('<div style="position:absolute;width:'+theWidth+';height:'+theHeight+';clip:rect(0 '+theWidth+' '+theHeight+' 0);left:0;top:0">') document.writeln('<div id="firstNews" style="position:absolute;width:'+theWidth+';left:0;top:1">') document.write(toScroll[0]) document.writeln('</div>') document.writeln('<div id="secondNews" style="position:absolute;width:'+theWidth+';left:0;top:0;visibility:hidden">') document.write(toScroll[dyndetermine=(toScroll.length==1)? 0 : 1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</div>') } } newsScroll.prototype.move = function(whichdiv){ var c = this; theDelay = c.scrollerdelay; theHeight = c.scrollerheight; scroll_obj=eval(; tdiv=eval(whichdiv) if (parseInt(>0&&parseInt(<=5){"px" setTimeout("scroll_obj.move(tdiv)",theDelay) setTimeout("scroll_obj.move2(secondNews_obj)",theDelay) // document.write(' Rocks!') return } if (parseInt(>=tdiv.offsetHeight*-1){"px" setTimeout("scroll_obj.move(tdiv)",50) } else {"px" tdiv.innerHTML=toScroll[c.i] if (c.i==toScroll.length-1) c.i=0 else c.i++ } } newsScroll.prototype.move2 = function(whichdiv){ var c = this; theDelay = c.scrollerdelay; theHeight= c.scrollerheight; scroll_obj=eval(; tdiv2=eval(whichdiv) if (parseInt(>0&&parseInt(<=5){"px" setTimeout("scroll_obj.move2(tdiv2)",theDelay) setTimeout("scroll_obj.move(firstNews_obj)",theDelay) return } if (parseInt(>=tdiv2.offsetHeight*-1){"px" setTimeout("scroll_obj.move2(secondNews_obj)",50) } else {"px" tdiv2.innerHTML=toScroll[c.i] if (c.i==toScroll.length-1) c.i=0 else c.i++ } } newsScroll.prototype.startScroll = function(){ var c = this; scroll_obj=eval(; if (toScroll.length >2) c.i = 2; else c.i = 0; firstNews_obj=ie? firstNews : document.getElementById("firstNews") secondNews_obj=ie? secondNews : document.getElementById("secondNews") setTimeout("scroll_obj.move(firstNews_obj)",c.scrollerDelay);;'visible' } --> </script> </head> <body style="background-color:#ffffff;"> <div align="center"> <script type="text/javascript"> <!-- Begin theNews=new newsScroll("theNews"); //create our newsScroller object theNews.scrollerdelay = 5000; // pausetime 3000 = 3 Seconds theNews.scrollerwidth = 300; // the width of the box theNews.scrollerheight = 100; // the height of the box theNews.scrollerbgcolor = ''; // the box background color theNews.scrollerbackground = ''; // Set to blank if you don't want to use a background image //****************************************************************** // // The addItem method below has 5 variables and is formated as follows: // addItem (text,link,font,fontSize,fontStyle) // text - the text to be displayed. // link - (optional) website, or page to link news item to. // font - (optional) Font face to use on item. // fontSize - (optional) size in pt format // i.e. 1=8pt, 2=10pt, 3=12pt and so on. // fontStyle - (optional) css style to assign to font. You can use the class name. // //****************************************************************** theNews.addItem('Welcome to <em>SnapBbuilder</em><br><br>Feel free to use any of the scripts listed here<br>(<em>This item contains a link.</em>)','','','','newsTxt2'); theNews.addItem('We have scripts for banner ads, graphics, forms, navigation, cookies, and more!','','','','newsTxt1'); theNews.addItem('This scoller can be used to post current news, sales items, or new content. The listings can contain links or can just be text, like this one.','','','',''); theNews.addItem('You can set the speed and size of the scroller box to be used. Add as many items as you like!','','','','newsTxt1'); // the next 2 lines construct the news box, and start the scroller theNews.construct(); theNews.startScroll(); // End --> </script> </div> <br /><br /> <p>Adjust the STYLES to suit your needs.</p> <p>You can transfer the 'javascript' code to an external file to minify your page size.</p> <br /><br /> [ This code example from <a href="">Alternating Message Text Box Code Snippet</a> page. ] </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library