Webmasters Tools - Ticker Applet
The Ticker applet will allow you to display customized quotes from Barchart.com directly onto your website. The ticker applet is fully customizable and will work for both stocks and commodities. You can customize the symbols, alias the names, change background colors, foreground colors, fonts, sizes, displays and styles, among other attributes.
The Ticker Applet will also work in conjunction with the co-brands
EXAMPLE 1:
To produce this applet:
<APPLET NAME="Ticker1"
CODE="Ticker.class"
ARCHIVE="Ticker.jar"
CODEBASE="http://java.barchart.com/ticker"
HEIGHT="40"
WIDTH="450"
>
<PARAM NAME="panels" VALUE="1">
<PARAM NAME="1:symbols" VALUE="'Indices,$NASX:Nasdaq Comp,'Stocks,IBM,GE,EBAY,YHOO:Yahoo!">
<PARAM NAME="1:scroll" VALUE="-1, 50">
<PARAM NAME="1:bgcolor" VALUE="#000000">
<PARAM NAME="1:fgcolor" VALUE="#FFFFFF">
<PARAM NAME="1:pscolor" VALUE="#00CC00">
<PARAM NAME="1:ngcolor" VALUE="#FF3333">
<PARAM NAME="1:hilight" VALUE="#FFFF00">
<PARAM NAME="1:font" VALUE="Arial, Bold, 12">
<PARAM NAME="1:multiline" VALUE="true">
</APPLET>
EXAMPLE 2:
The code to produce this:
<APPLET NAME="Ticker2"
CODE="Ticker.class"
ARCHIVE="Ticker.jar"
CODEBASE="http://java.barchart.com/ticker"
HEIGHT="48"
WIDTH="450"
>
<PARAM NAME="panels" VALUE="3">
<PARAM NAME="1:symbols" VALUE="'Indices,$NASX:Nasdaq,$NYS:NYSE,$IUX:Russell,$VLA:Value Line">
<PARAM NAME="1:scroll" VALUE="-1, 100">
<PARAM NAME="1:bgcolor" VALUE="#0000FF">
<PARAM NAME="1:fgcolor" VALUE="#FFFFFF">
<PARAM NAME="1:pscolor" VALUE="#00CC00">
<PARAM NAME="1:ngcolor" VALUE="#FF3333">
<PARAM NAME="1:hilight" VALUE="#FFFF00">
<PARAM NAME="1:font" VALUE="Arial, Normal, 10">
<PARAM NAME="2:symbols" VALUE="'Stocks,MSFT:Microsoft,IBM,QQQQ,SIEB:Siebert,TSA:Sports Authority,EBAY,YHOO:Yahoo!">
<PARAM NAME="2:scroll" VALUE="-1, 200">
<PARAM NAME="2:bgcolor" VALUE="#FFFFFF">
<PARAM NAME="2:fgcolor" VALUE="#000000">
<PARAM NAME="2:pscolor" VALUE="#00AA00">
<PARAM NAME="2:ngcolor" VALUE="#AA0000">
<PARAM NAME="2:hilight" VALUE="#0000FF">
<PARAM NAME="2:font" VALUE="Arial, Normal, 10">
<PARAM NAME="3:symbols" VALUE="'Commodities,CZ7:Dec Corn,LHY0:Lean Hogs Spot,SPZ7:S&P 500 Futures">
<PARAM NAME="3:scroll" VALUE="-1, 50">
<PARAM NAME="3:bgcolor" VALUE="#333333">
<PARAM NAME="3:fgcolor" VALUE="#FFFFFF">
<PARAM NAME="3:pscolor" VALUE="#00CC00">
<PARAM NAME="3:ngcolor" VALUE="#FF3333">
<PARAM NAME="3:hilight" VALUE="#CCFFFF">
<PARAM NAME="3:font" VALUE="Arial, Normal, 10">
</APPLET>
Explanation of tags:
- panels: number of panels to display
- X:symbols: X - panel number (start at 1). Symbols list. (Optional: add a colon for aliasing)
- X:scroll:
Scroll Direction (negative number or left, positive number or right)
Scroll Speed (in milliseconds)
- X:bgcolor: background color of panel X
- X:fgcolor: foreground color (regular text)
- X:pscolor: positive color
- X:ngcolor: negative color
- X:hilight: highlight color (when the mouse is over the item)
- X:font:
Font Face (Anything that the browser may support).
Font Style - BOLD, NORMAL, ITALIC(S)
Font Size - point size
The ticker applet can be made compatible with the co-brands by adding the following line of code. <PARAM NAME="cobrand" VALUE="****">
where **** represents your sites code. <PARAM NAME="target" VALUE="new"> opens the links in a new window.
Scriping the Ticker Applet
The Ticker Applet can also be scripted to allow for some user interaction. Both Microsoft and Sun Java now support a somewhat common way to access methods of applets.
setScroll([int] panelid, [int] direction, [int] delay)
The panelid is the same as the number prefixing the params, and the direction and scroll parameters as those in the applet params (see above.)
The following example is somewhat simplistic, as it changes the direction (left, stop, right), and implements a simple way of changing the speed. It only changes the speed by using the delay variable, where in reality, the ticker could go faster if you also change the direction to be a larger (positive or negative). Also, the example uses text as the "button", whereas you could spiff it up by adding neat graphics for the left arrow, stop, and right arrow buttons.
Scripting Example:
< • 0 • >
The required code (comments are in blue, so delete these if you copy/paste)
<APPLET ID="TickerX" NAME="TickerX" Note the addition of the ID attribute!
CODE="Ticker.class"
ARCHIVE="Ticker.jar"
CODEBASE="http://java.barchart.com/ticker"
HEIGHT="40"
WIDTH="450"
>
<PARAM NAME="panels" VALUE="1">
<PARAM NAME="1:symbols" VALUE="'Indices,$NASX:Nasdaq Comp,'Stocks,IBM,GE,EBAY,YHOO:Yahoo!">
<PARAM NAME="1:scroll" VALUE="-1, 50">
<PARAM NAME="1:bgcolor" VALUE="#000000">
<PARAM NAME="1:fgcolor" VALUE="#FFFFFF">
<PARAM NAME="1:pscolor" VALUE="#00CC00">
<PARAM NAME="1:ngcolor" VALUE="#FF3333">
<PARAM NAME="1:hilight" VALUE="#FFFF00">
<PARAM NAME="1:font" VALUE="Arial, Bold, 12">
<PARAM NAME="1:multiline" VALUE="true">
</APPLET>
<SCRIPT LANGUAGE="JavaScript">
// Set the initDelay and initDIrection to be the same as the values defined in the params
var initDelay = 50;
var initDirection = -1;
var curDelay = initDelay;
var curDirection = initDirection;
function changeScroll(dir) {
// Calling changeScroll with the same dir makes the ticker go faster
if (dir == 0) {
curDelay = 0;
curDirection = 0;
}
else if (dir == curDirection)
curDelay -= 10;
else {
curDirection = dir;
curDelay = initDelay;
}
// You can't have a negative delay. And some rational limit must be set
if (curDelay < 5)
curDelay = 5;
var a = document.getElementById('TickerX');
if (a) {
a.setScroll(1, curDirection, curDelay);
}
}
</SCRIPT>
<A HREF="javascript:changeScroll(-1);"> <</A> • <A HREF="javascript:changeScroll(0);">0</A> • <A HREF="javascript:changeScroll(1);">></A>
