Example - Stock Ticker
+1
-1Doron 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 ticker illustrated above implements a Stock Ticker, however this object can be used to animate any set HTML SPANs contained in a DIV. The ricker can either be positioned either absolutely or it can be positioned relatively as in this 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
- 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!
