See the terms of use below and then, follow these easy steps:

1. Copy the code from the text-area below into your clipboard and paste it into your webpage's HTML where you want the scroller to display.
   
   <script type="text/javascript"> /* * Creativyst(R) Ballistic Scroller: * * (C) Copyright 2004 - 2007 Creativyst, Inc. * ALL RIGHTS RESERVED * * Use of this software in running applications, with * or without modification, is permitted provided * that the conditions published at: * www.creativyst.com/Prod/18/Scroller/BalScr.htm * are met. * * This software may not be redistributed * * - This comment may not be removed - * * v1.0f */ /* Configurations: * bsWidth The width of the scroller * bsHeight The height of the scroller * bsMoveIncr How far to move on each frame * bsFrameRate How often (in miliseconds) to move the frame * bsPauseDelay How long to pause (in milisecs) between each message * bsUseBalistics 1 to slow down near end of scroll. * * See below for how to add static and/or dynamic content for display * */ var bsWidth=160; var bsHeight=185; var bsMoveIncr=10; var bsFrameRate = 40; // was 40 var bsPauseDelay = 3000; var bsUseBallistics = 1; // 0 for linear movers var bsContent=new Array(); // don't change bsContent[0] = ""; /* Static Content: * Fill elements of the bsContent[] array with static messages you'd like * to display on the scroller. You can use the ballistic scroller to * display only these static messages, or you can include a static * message or two to be displayed along with dynamic JSMsg feed data (see below). * * Delete or comment out these array lines (but not the above declaration) * if you don't want to display static messages. * */ bsContent[0] = "Display:<BR><strong><CENTER>-Dynamic feeds<BR>(<em>JSMsg<\/em>)<P/> -Static messages<P/> -Both...<\/strong><CENTER><HR WIDTH=\"25%\">"; bsContent[1] = 'The <strong>Ballistic Scroller<\/strong> from Creativyst(R).\n'; // bsContent[2] = "And did we mention it's <strong>JSMsg Ready<\/strong>?"; // bsContent[3] = "<strong>JSMsg<\/strong> lets you display <strong><em>dynamic<\/em><\/strong> information from outside JSMsg feeds ...<P\/><UL><LI>Set <B>one<\/B> variable!<LI><strong>NO<\/strong> server-side scripting!<\/UL> :-)"; // bsContent[4] = "An example of dynamic content from a <strong>JSMsg<\/strong> file follows..."; /* Dynamic Content (JSMsg feeds): * JSMsgNS * Namespace of the JSMsg feed who's messages you'd * like to display. You must include the JSMsg * link in a JavaScript <SCRIPT> tag ABOVE this * script. * * You may display messages from multiple JSMsg feeds * by listing multiple namespaces in the JSMsgNS variable. * e.g. * * JSMsgNS = "ciq cvtnew"; * * Leave this set to JSMsgNS = ""; if you only need * to display static messages from the above arrays. * * JSMsgSeq * Messages from muliple newsfeeds are normally interleaved * but they can be sequential by setting the JSMsgSeq variable * to 1 * */ var JSMsgNS = ""; var JSMsgSeq = 0; /* ========================================================================== * End of user configurable variables * ========================================================================== */ var bsOrgArray = new Array(); bsOrgArray[0] = ""; var Cur_i = 0; var DOMObj; var IEObj; var NS4xObj; var BalIncr = bsMoveIncr; var beenHere; var MousePaused = 0; var MessagePaused = 0; var MsgPauseNow = bsPauseDelay; var bsISRWaiting = 0; var bsOrgArray = new Array(); function bsInitialize() { var divobj, cpyi; for(cpyi = 0;cpyi < bsContent.length;cpyi++) { bsOrgArray[cpyi] = bsContent[cpyi];} bsContent = JSMsgIf(bsContent, JSMsgNS, JSMsgSeq); if(document.getElementById) { divobj = document.getElementById('ScrollerFrame'); divobj.style.width = bsWidth + 'px'; divobj.style.height = bsHeight + 'px'; divobj = document.getElementById('bsWindow'); divobj.style.width = bsWidth + 'px'; divobj.style.height = bsHeight + 'px'; divobj = document.getElementById('bsMover'); divobj.style.width = bsWidth + 'px'; divobj.style.height = bsHeight + 'px'; DOMObj=eval( document.getElementById('bsMover') ); DOMObj.innerHTML = bsContent[Cur_i]; DOMObj.style.top=bsHeight + 'px'; moverDOM();} else if(document.all) { ScrollerFrame.style.width = bsWidth; IEObj=eval(MoverWin); IEObj.innerHTML=bsContent[Cur_i]; IEObj.style.pixelTop=bsHeight; sizeup=IEObj.offsetHeight; moverIE();} else if(document.layers) { if(!beenHere) { beenHere = 1; setTimeout("bsInitialize()", 1000);} NS4xObj=document.SlideWindow.document.SlideMover; NS4xObj.document.write(bsContent[Cur_i]); NS4xObj.document.close(); moverNS4x();} } function moverDOM() { var reducer; var myTop = parseInt(DOMObj.style.top); BallisticsProc(myTop); reducer = (myTop-BalIncr); if(myTop>(BalIncr)) { DOMObj.style.top=reducer + 'px'; if(!MousePaused && !MessagePaused) { bsISRWaiting++; setTimeout("moverDOM()",bsFrameRate);} } else{ PauseTop();} } function moverIE() { var myTop = parseInt(IEObj.style.pixelTop); BallisticsProc(myTop); if (IEObj.style.pixelTop>=bsMoveIncr) { IEObj.style.pixelTop-=BalIncr; if(!MousePaused && !MessagePaused) { bsISRWaiting++; setTimeout("moverIE()",bsFrameRate);} } else{ PauseTop();} } function moverNS4x() { BallisticsProc(NS4xObj.top); if(NS4xObj.top>=bsMoveIncr) { NS4xObj.top-=BalIncr; if(!MousePaused && !MessagePaused) { bsISRWaiting++; setTimeout("moverNS4x()",bsFrameRate);} } else{ PauseTop();} } function BallisticsProc(ThisTop) { if(bsUseBallistics && BalIncr > 2 ) { if(ThisTop < (bsHeight/7)) { BalIncr = bsMoveIncr - 1;} if(ThisTop < (bsHeight/8) ) { BalIncr = bsMoveIncr - 3;} if(ThisTop < (bsHeight/10) ) { BalIncr = bsMoveIncr - 7;} if(ThisTop < 8) { BalIncr = 1;} BalIncr = (BalIncr < 1 ? 1 : BalIncr);} } function PauseTop() { MessagePaused = 1; setTimeout("ChangeContent()", MsgPauseNow);} function ChangeContent() { MessagePaused = 0; MsgPauseNow = bsPauseDelay; if(!MousePaused) { Cur_i++; if(Cur_i >= bsContent.length) { Cur_i = 0;} if(document.getElementById) { DOMObj.style.top=bsHeight + 'px'; BalIncr = bsMoveIncr; setTimeout("MakeDOMChangeNow()",3); moverDOM();} else if(document.all) { IEObj.style.pixelTop=bsHeight IEObj.innerHTML=bsContent[Cur_i] BalIncr = bsMoveIncr; moverIE();} else { NS4xObj.document.write(bsContent[Cur_i]); NS4xObj.document.close(); NS4xObj.top=bsHeight; BalIncr = bsMoveIncr; moverNS4x();} } else { MsgPauseNow = bsFrameRate;} } function MakeDOMChangeNow() { DOMObj.innerHTML=bsContent[Cur_i];} function MousePause() { MousePaused = 1;} function MouseStart() { MousePaused = 0; if(!MessagePaused) { if(document.getElementById) { moverDOM();} else if(document.all) { moverIE();} else { moverNS4x();} } } function RunScroller() { var msg; msg = ''; msg += '<DIV ID="ScrollerFrame" CLASS="ScrollerFrame">'; if(!document.getElementById && !document.all) { msg += '<ilayer name="SlideWindow" width="' + bsWidth + '"; height="' + bsHeight + '";>\n'; msg += '<layer name="SlideMover" width="' + bsWidth + '"; onMouseover="MousePause();" onMouseout="MouseStart();">'; msg += '<\/layer>'; msg += '<\/ilayer>';} document.write(msg); if (document.getElementById || document.all) { document.write('<div id="bsWindow" class="bsWindow" style="position:relative;overflow:hidden;width:' +bsWidth+ ';height:' +bsHeight+ ';clip:rect(0 ' +bsWidth+ ' ' +bsHeight+ ' 0);" onMouseover="MousePause();" onMouseout="MouseStart();">'); document.write('<div id="bsMover" class="bsMover" style="position:relative;width:'+bsWidth+';">'); document.write('<\/div><\/div>');} document.write('<\/DIV>'); bsInitialize();} function JSMsgIf(msgAr, myNs, mySeq) { var TotNS,LongestNS; var NSAr = new Array(); var i,j,k,o; if(!myNs) { myNs = "";} if(!mySeq) { mySeq = 0;} o = msgAr.length; if(myNs) { NSAr = myNs.split(" "); TotNS = NSAr.length; LongestNS = 0; j = 0; for(i = 0;i < TotNS;i++) { j = jsmMetaMsg(NSAr[i], "MetaCount"); if(j > LongestNS) { LongestNS = j;} } if(!j) { return(msgAr);} k = o; if(mySeq) { for(j = 0;j < TotNS;j++) { for(i = 0;i < LongestNS;i++) { if(jsmMetaMsg(NSAr[j],"MetaCount") <= i) { continue;} msgAr[k] = jsmGetN(NSAr[j], "LinkTitle", i); if(!msgAr[k]) { msgAr[k] = jsmGetN(NSAr[j], "Body", i); msgAr[k] += "<BR>   -"; t = jsmGetN(NSAr[j], "Attrib",i); if(t.length > 17) { t = t.substr(0,14); t += "...";} msgAr[k] += t;} msgAr[k] = msgAr[k].replace(/&/g, "&"); msgAr[k] = msgAr[k].replace(/'/g, "\'"); k++;} } } else { for(j = 0;j < LongestNS;j++) { for(i = 0;i < TotNS;i++) { if(jsmMetaMsg(NSAr[i],"MetaCount") <= j) { continue;} msgAr[k] = jsmGetN(NSAr[i], "LinkTitle", j); if(!msgAr[k]) { msgAr[k] = jsmGetN(NSAr[i], "Body", j); msgAr[k] += "<BR>   -"; t = jsmGetN(NSAr[i], "Attrib",j); if(t.length > 17) { t = t.substr(0,14); t += "...";} msgAr[k] += t;} msgAr[k] = msgAr[k].replace(/&/g, "&"); msgAr[k] = msgAr[k].replace(/'/g, "\'"); k++;} } } } return(msgAr);} function jsmGetN(ns,MsgPart,number) { var rv, c, er; c = "rv = " + ns + ".GetN('" + MsgPart + "'," + number + ");"; er = eval(c); return(rv);} function jsmGet(ns,MsgPart,offset) { var rv, c, er; c = "rv = " + ns + ".Get('" + MsgPart + "'," + offset + ");"; er = eval(c); return(rv);} function jsmGetDay(ns,MsgPart) { var rv, c, er; c = "rv = " + ns + ".GetDay('" + MsgPart + "');"; er = eval(c); return(rv);} function jsmMetaMsg(ns,MsgPart) { var rv, c, er; c = "rv = " + ns + ".MetaMsg('" + MsgPart + "');"; er = eval(c); return(rv);} RunScroller(); </script>
2. Set the configuration settings at the top of the script for size and scroll times. Also, set the JSMsgNS variable to the namespaces you want to interface to.

3. You must include the JSMsg feeds you want to display by placing <script> tags in the <head> section of your page with SRC set to the URL of each JSMsg feed (see our feeds listing page for examples).

4. Add the following rule to your style sheet or include it in a style element in the <head> section of your document
    .ScrollerFrame
    {
      border-style:solid;
      border-width:1px;
      border-color:#000000;
      text-align:left;
      width:20px;
    }
   
   You may change this to taste but you must set the size (width and height) using the size parameters provided at the top of the script.

The JavaScript Code for Creativyst(R) Ballistic Scroller is © Copyright, Creativyst, Inc. 2003 - 2007
ALL RIGHTS RESERVED.

• Ballistic Scroller is a content scroller JavaScript code produced by Creativyst, Inc. You may use it freely provided the following conditions are met.

• You may use Creativyst(R) Ballistic Scroller when producing Internet or intranet based web sites for yourself, your employer, or your clients, however

• You may not distribute the source code OR ANY PART of the source code as part of any distribution channel or product, such as a software library, an application development environment, or a package, such as a disk or download offering, even if the package contains a web page that the code is used within. Those having such requirements must contact Creativyst, Inc. and obtain permission.

• Any comments in the source code that contain copyright notices must remain intact and unchanged in format and relative position within the source code. This condition aplies to the entire comment containing the copyright notice.

• JSMsg capabilities must not be removed or altered. If you modify the code, your modified version must retain the ability to easily access JSMsg feeds. Modified versions may not interface to other types of dynamic content feeds without permission from Creativyst, Inc.

• THIS SOFTWARE IS PROVIDED BY CREATIVYST CORPORATION ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES.