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.
Constructor
NewsTicker(x,y,width,height)
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) myticker.addItem(item0) myticker.addItem(item1) myticker.addItem(item2)
After you've added the items, you build(), writeCSS(), and activate()
Example: newsticker1.html [source] - a simple NewsTicker example
| Property Name | Description | Default |
| name | holds the name used for all the layers | |
| w | the width of the layers | |
| h | the height of the layers | |
| inc | the pixel increment when sliding | 2 |
| speed | the repetition delay in milliseconds | 30 |
| pauseLength | the time in milliseconds to display and item before switching to the next one | 3000 |
| fromX | the initial X position for the item layers | 0 |
| fromY | the initial Y position for the item layers | h (the height) |
| bgColor | background color for the layers | null/transparent |
| this.items[i].text | contains the value sent for each item (this is not rewritable) | null |
| Method Name | Description |
| 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 Name | Description |
| lyr | the top-most layer of the ScrollWindow |
| items[i].lyr | layer 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
| Home | Next Lesson: List Object |