DHTML Demonstrations Using DOM/Style:Stock Ticker

From MDC

[edit] DHTML Example - Stock Ticker

Doron Rosenberg, a member of the mozilla.org community, contributed this example ticker to illustrate some Cross Browser (Netscape 7.x/Mozilla/Internet Explorer 5) DHTML techniques using the W3C DOM. Rather than using absolute positioning to stitch absolutely positioned divs and spans together, Doron has used the W3C DOM skillfully to get the DOM to do most of the work for him. The example implements a Stock Ticker, however, this object can be used to animate any set spans contained in a div. The ticker can be positioned either absolutely or relatively as in the example.

stock-ticker.js implements a JavaScript object that animates a stock ticker consisting of a div containing a sequence of spans. The div is shifted to the left by shiftBy pixels every interval ms. As the second visible span reaches the left of the screen, the first is appended to the end of the div's children. This approach eliminates much of the calculation required when using absolutely positioned divs.

The raw data is contained within a div with class Ticker. Each Stock Symbol is contained in a span with class clstsu for increased prices and clstsd for decreased prices. This allows either Server Side updates or updates using XML based query methods. (more on that later).

A Ticker has the following methods:

Constructor Ticker(name, id, shiftBy, interval)

Constructs an instance of the Ticker. You must assign the reference to the Ticker object to a global variable in order to make sure it still exists even after all functions have completed.

name 

String containing the name of the global variable referencing the newly created Ticker object.

id 

String containing the ID of the DIV containing the Data to be animated.

shiftBy 

Number containing the number of pixels to shift the ticker to the left each time the Ticker fires.

interval 

Number containing the interval between updates to the Ticker in milliseconds.

	ticker = new Ticker('ticker', 'tickerID', 1, 45);

start()
starts the animation of the ticker

stop()
stops the animation of the ticker

changeInterval(newinterval)
changes the shifting interval to newinterval

A Ticker has the following properties:

name 

String containing the name of the global variable referencing the newly created Ticker object.

id 

String containing the ID of the DIV containing the Data to be animated.

shiftBy 

Number containing the number of pixels to shift the ticker to the left each time the Ticker fires.

interval 

Number containing the interval between updates to the Ticker in milliseconds.

runId 

Number containing the return value from setTimeout or null if the ticker is not running.

div 

Reference to the DIV HTMLElement containing the data to be animated.

Get stock-ticker.js and stock-ticker.css and start your W3C DOM DHTML Script Library today!