JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Mike's DHTML scroller 2

Similar to our own DHTML scroller creation (Pausing up-down scroller), Mike's DHTML scroller features smooth pausing between messages, configurable scroll speed, color, and font. Oh yes, and the script's cross browser functional too…


Insert into <HEAD>


Insert into <BODY>
<script language="JavaScript" src="dhtmllib.js"></script> <script language="JavaScript" src="scroller.js"></script> <script language="JavaScript"> var myScroller1 = new Scroller(0, 0, 480, 32, 1, 8); myScroller1.setColors("#006600", "#ccffcc", "#009900"); myScroller1.setFont("Verdana,Arial,Helvetica", 2); myScroller1.addItem("<b>Click here for <a href='http://dynamicdrive.com'>Dynamic Drive</a>, the net\'s #1 DHTML site!</b>"); myScroller1.addItem("<b>Visit <a href='http://www.brainjar.com'>Brain Jar</a>, Mike\'s great coding site!</b>"); myScroller1.addItem("<b>Looking for free JavaScripts? Visit <a href='http://wsabstract.com'>Website Abstraction.</a>"); myScroller1.addItem("<b>Stay abreast on the latest technology news, with <a href='http://news.com'>News.com.</a></b>"); function runmikescroll() { var layer; var mikex, mikey; // Locate placeholder layer so we can use it to position the scrollers. layer = getLayer("placeholder"); mikex = getPageLeft(layer); mikey = getPageTop(layer); // Create the first scroller and position it. myScroller1.create(); myScroller1.hide(); myScroller1.moveTo(mikex, mikey); myScroller1.setzIndex(100); myScroller1.show(); } window.onload=runmikescroll </script> <div id="placeholder" style="position:relative; width:420px; height:32px;"> </div>
Step 2: The script requires two external JavaScript libraries to run, which you'll need to download and put in your webpage directory. Download the following two files (by clicking it, or clicking it with the shift key depressed for NS users): 1) dhtmllib.js 2) scroller.js You're done!
Other Options
The scroller comes with many options, which you set through it's methods. Some of these methods are used in the above code, while others aren't. They are: Scroller(x, y, width, height, border, padding) * Creates a new Scroller object positioned at (x,y) with the given width and height. The border and padding values define the size of the border around the scroller and margin between the border and the item text. setColors(fgcolor, bgcolor, bdcolor) Sets the default text, background and border colors, respectively, for the scroller. Note that you can insert HTML tags in the item text to mix text colors. The defaults are black, white and black respectively. setFont(face, size) Sets the default font face and size for item text. Any values allowed in a <FONT> tag can be used. Note that you can insert HTML tags in the item text to mix fonts. The defaults are "Arial,Helvetica" and 2 respectively. setSpeed(pps) Sets the scroll speed in pixels per second. The default is 50. setPause(ms) Sets the amount of time the scroller will pause whenever a new item scrolls into view. This pause gives the user time to read the text before it starts moving again. The time is given in milliseconds (1000ms = 1 second). The default is 2000. addItem(str) * Use this method to create the items for a scroller. The string can contain text and HTML tags so you can use images, links, etc. You can add as many items as you want. Text is wrapped automatically to fit within the scroller but note that if an item exceeds the defined width or height of the scroller, it will be clipped.