Snap Builder HTML5 CSS3 Free Public Codes Library


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