Dynamic Drive DHTML Scripts- Mike's DHTML scroller

New Revised CSS Library Forums Web Tools

Mike's DHTML scroller

Author: Mike Hall

Updated: July 22nd, 02' By Dynamic Drive for NS6 functionality

Description: 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...

Demo:

Directions

Step 1: Copy the below into the <body> section of your web page where you wish the scroller to appear:

Select All
<div id="tempholder"></div> <script language="JavaScript" src="dhtmllib.js"></script> <script language="JavaScript" src="scroller.js"></script> <script language="JavaScript"> /* Mike's DHTML scroller (By Mike Hall) Last updated July 21st, 02' by Dynamic Drive for NS6 functionality For this and 100's more DHTML scripts, visit http://www.dynamicdrive.com */ //SET SCROLLER APPEARANCE AND MESSAGES var myScroller1 = new Scroller(0, 0, 480, 32, 1, 5); //(xpos, ypos, width, height, border, padding) myScroller1.setColors("#006600", "#ccffcc", "#009900"); //(fgcolor, bgcolor, bdcolor) 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://javascriptkit.com'>JavaScript Kit.</a>"); myScroller1.addItem("<b>Discuss and get help on web coding, at <a href='http://www.codingforums.com'>CodingForums.com</a></b>"); //SET SCROLLER PAUSE myScroller1.setPause(2500); //set pause beteen msgs, in milliseconds 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 zip file, and extract its contents:

mikescroll.zip (download by right clicking, and selecting "Save as")

As mentioned, upload the two .js files contained inside to your webpage directory.

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.

As you can see, it's one robust scroller Mike's created!