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 http://snapbuilder.com 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 : webdevel.deezhosts.net : 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.name=name; c.mc=0; c.i=2; return this; } newsScroll.prototype.addItem = function(text,link,font,fontSize,fontStyle){ var c = this; if (link !=''){ if (font != '') toScroll[c.mc]="<a href='"+link+"'><font face='"+font+"' size='"+fontSize+"' Class='"+fontStyle+"'>"+text+"</font></a>"; else toScroll[c.mc]="<a href='"+link+"'><font Class='"+fontStyle+"'>"+text+"</font></a>"; } else { if (font != '') toScroll[c.mc]="<font face='"+font+"' size='"+fontSize+"' Class='"+fontStyle+"'>"+text+"</font>"; else toScroll[c.mc]="<font Class='"+fontStyle+"'>"+text+"</font>"; } c.mc++; } 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(c.name); 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(c.name); tdiv=eval(whichdiv) if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){ tdiv.style.top=0+"px" setTimeout("scroll_obj.move(tdiv)",theDelay) setTimeout("scroll_obj.move2(secondNews_obj)",theDelay) // document.write('SnapBuilder.com Rocks!') return } if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){ tdiv.style.top=parseInt(tdiv.style.top)-5+"px" setTimeout("scroll_obj.move(tdiv)",50) } else { tdiv.style.top=parseInt(theHeight)+"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(c.name); tdiv2=eval(whichdiv) if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){ tdiv2.style.top=0+"px" setTimeout("scroll_obj.move2(tdiv2)",theDelay) setTimeout("scroll_obj.move(firstNews_obj)",theDelay) return } if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){ tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px" setTimeout("scroll_obj.move2(secondNews_obj)",50) } else { tdiv2.style.top=parseInt(theHeight)+"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(c.name); 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); secondNews_obj.style.top=theHeight; secondNews_obj.style.visibility='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>)','http://snapbuilder.com','','','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="http://snapbuilder.com/code_snippets/copy_code_snippet_53.html">Alternating Message Text Box Code Snippet</a> page. ] </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library