NewsTicker Object

The NewsTicker is a DHTML replacement for those ticker tape applets you see on news websites. In a very small amount of code you get a customizable widget that will display a layer (one news item), and then slide in a new layer (the next news item) to replace it.



It's a very simple object. You have one rectangle layer that you can put your news items into. The object won't do any overflow handling on it's own so you must make adjust it so your content will fit in the dimensions you choose.

To add news items to the NewsTicker use the addItem() method:

myticker = new NewsTicker(50,50,200,200)
myticker.addItem('this is the content of <br>my first news item')
myticker.addItem('this is the content of <br>my second news item')
myticker.addItem('this is the content of <br>my third news item')

The content is just added as a String. You can place any type of content you want, including hyperlinks, images etc. You could also set variables to the strings and add it that way:

var item0 = 'this is the content of <br>my first news item'
var item1 = 'this is the content of <br>my second news item'
var item2 = 'this is the content of <br>my third news item'

myticker = new NewsTicker(50,50,200,200)

After you've added the items, you build(), writeCSS(), and activate()

Example: newsticker1.html [source] - a simple NewsTicker example

Properties, Methods, and DynLayers Summary

Property NameDescriptionDefault
nameholds the name used for all the layers
wthe width of the layers
hthe height of the layers
incthe pixel increment when sliding2
speedthe repetition delay in milliseconds30
pauseLengththe time in milliseconds to display and item before switching to the next one3000
fromXthe initial X position for the item layers0
fromYthe initial Y position for the item layersh (the height)
bgColorbackground color for the layersnull/transparent
this.items[i].textcontains the value sent for each item (this is not rewritable)null

Method NameDescription
build()assembles the css and div properties to create the layers needed
activate(autostart)assigns all DynLayers and gets relevant information to allow the object to function. The autostart paramater is a boolean value (true/false) as to whether you want to start the NewsTicker in motion or not when activated. By default it will autostart so you only need to use if don't want it to start automatically.
addItem(String)adds a new item to the ticker
start()begins the NewsTicker motion
stop()stops the NewsTicker motions

DynLayer NameDescription
lyrthe top-most layer of the ScrollWindow
items[i].lyrlayer for each item

More on the fromX and fromY values

You'll notice in the first example that each item slid in from the bottom by default. The default fromX is 0, and the default fromY is the height you chose for the NewsTicker. All the layers start at that spot, and slide to the (0,0) position relative to the main NewsTicker layer (they are nested within a transparent layer). If you wanted slide in from the top you could reset the fromY to -100 (will start at -100, and slide to 0). You'll probably want to set these values to the same as your width/height.

Example: newsticker2.html [source] - an example with the fromX and fromY values set, and with start stop controls

Source Code


Home Next Lesson: List Object
copyright 1998 Dan Steinman