New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+

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 Developer's View

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

Select All

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!