jStockTicker (a jQuery Stock Ticker made easy) v1.1
[Update] Fixed source can be found here. Thanks to Shay and Julien.
I’ve been digging through my old work and found a nice javascript plugin that created a Stock Ticker. It made a good candidate to port it to jQuery.
So the jStockTicker plugin was born.
Basically it works with animating a div containing a sequence of spans. As soon as the second visible span reaches the edge of the visible area, the first span is appended to the end of the list.
Lets look at the plugin it self:
/**
* Horizontal Stock Ticker for jQuery.
*
* @package jStockTicker
* @author Peter Halasz <skinner@gmail.com>
* @license http://www.gnu.org/licenses/gpl-3.0.txt GPL v3.0
* @copyright (c) 2009, Peter Halasz all rights reserved.
*/
( function($) {
$.fn.jStockTicker = function(options) {
if (typeof (options) == 'undefined') {
options = {};
}
var settings = $.extend( {}, $.fn.jStockTicker.defaults, options);
var $ticker = $(this);
settings.tickerID = $ticker[0].id;
$.fn.jStockTicker.settings[settings.tickerID] = {};
var $wrap = null;
if ($ticker.parent().get(0).className != 'wrap') {
$wrap = $ticker.wrap("<div class='wrap'></div>");
}
var $tickerContainer = null;
if ($ticker.parent().parent().get(0).className != 'container') {
$tickerContainer = $ticker.parent().wrap(
"<div class='container'></div>");
}
var node = $ticker[0].firstChild;
var next;
while(node) {
next = node.nextSibling;
if(node.NodeType == 3) {
$ticker[0].removeChild(node);
}
node = next;
}
var shiftLeftAt = $ticker.children().get(0).offsetWidth;
$.fn.jStockTicker.settings[settings.tickerID].shiftLeftAt = shiftLeftAt;
$.fn.jStockTicker.settings[settings.tickerID].left = 0;
$.fn.jStockTicker.settings[settings.tickerID].runid = null;
$ticker.width(2 * screen.availWidth);
function startTicker() {
stopTicker();
var params = $.fn.jStockTicker.settings[settings.tickerID];
params.left -= settings.speed;
if(params.left <= params.shiftLeftAt * -1) {
params.left = 0;
$ticker.append($ticker.children().get(0));
params.shiftLeftAt = $ticker.children().get(0).offsetWidth;
}
$ticker.css('left', params.left + 'px');
params.runId = setTimeout(arguments.callee, settings.interval);
$.fn.jStockTicker.settings[settings.tickerID] = params;
}
function stopTicker() {
var params = $.fn.jStockTicker.settings[settings.tickerID];
if (params.runId)
clearTimeout(params.runId);
params.runId = null;
$.fn.jStockTicker.settings[settings.tickerID] = params;
}
function updateTicker() {
stopTicker();
startTicker();
}
$ticker.hover(stopTicker,startTicker);
startTicker();
};
$.fn.jStockTicker.settings = {};
$.fn.jStockTicker.defaults = {
tickerID :null,
url :null,
speed :1,
interval :20
};
})(jQuery);
The plugin has a few defaults set and in future version will allow dynamic updating of ticker data through AJAX.
What you need to do is place the spans into a div and call the jQuery plugin in the ready function like this:
$(function() {
$("#ticker").jStockTicker({interval: 45});
});
And that’s it.
The example HTML page:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jStockTicker Demo page</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jstockticker-1.1.js"></script>
<script type="text/javascript">
$(function() {
$("#ticker").jStockTicker({interval: 45});
});
</script>
<style type="text/css">
div#examplePage {
color: #000;
font-family: Verdana, Arial, Helvetica, San-serif;
font-size: x-small;
text-align: left;
width: 760px;
margin: 0 auto;
padding: 0;
}
h1 {
font-size: 1.8em;
font-weight: bold;
margin: 10px 0 5px;
}
div#example {
background: #c3c1c1 none repeat-x scroll left top;
width: 740px;
margin: 20px 0 3px;
}
div#example h3 {
font-size: xx-small;
font-style: italic;
padding: 0;
margin: 0 10px 0;
line-height: 14px;
}
.container {
background: #fff none;
border: 1px solid #000;
height: 30px;
margin: 0 auto;
width: 735px;
}
.container .wrap {
width: 720px;
left: 10px;
top: 10px;
overflow: hidden;
position: relative;
line-height: normal;
font-size-adjust: none;
}
/**
* Stock Ticker styling
*/
div.stockTicker {
font-family: Verdana, Arial, Helvetica, San-serif;
font-size: x-small;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
div.stockTicker span {
margin: 0 10px 0;
}
div.stockTicker span.up {
color: green;
padding-left: 2px;
}
div.stockTicker span.down {
color: red;
margin: 0;
padding-left: 10px;
}
div.stockTicker span.eq {
margin: 0;
padding-left: 10px;
}
div.stockTicker span.quote {
margin: 0;
font-weight: bold;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="examplePage">
<h1>jStockTicker (a jQuery Stock Ticker made easy) v1.0</h1>
<p><b>What is jStockTicker?</b> It is a jQuery plugin to create a horizontally scrolling Stock Ticker</p>
<div id="example">
<h3>jquery.jStockTicker-1.1.js</h3>
<div id="ticker" class="stockTicker">
<span class="quote">Stock Quotes: </span>
<span class="up"><span class="quote">ABC</span> 1.543 0.2%</span>
<span class="down"><span class="quote">SDF</span> 12.543 -0.74%</span>
<span class="up"><span class="quote">JDF</span> 34.543 5.2%</span>
<span class="up"><span class="quote">ERA</span> 123.234 1.2%</span>
<span class="down"><span class="quote">DFF</span> 20.543 -5.2%</span>
<span class="eq"><span class="quote">CBX</span> 523.234 0.0%</span>
<span class="down"><span class="quote">IZF</span> 89.65 -3.4%</span>
<span class="up"><span class="quote">KJG</span> 456.64 0.318%</span>
<span class="up"><span class="quote">QWE</span> 6413.123 0.012%</span>
<span class="eq"><span class="quote">CVN</span> 6.3 0.0%</span>
<span class="down"><span class="quote">UIT</span> 74.543 -0.321%</span>
</div>
</div>
<p class="credits">
Code and design by Peter Halasz.
</p>
</div>
</body>
</html>
The plug in requires jQuery which you can find here.
The archive containing the plugin can be found here: jStockTicker-1.1.zip.
You have any questions or comments? Post them here :)
Categories: (X)HTML, Example, JavaScript, jQuery, Uncategorized
JavaScript, jQuery
how do i update the dynamic values into the current scrolling ticker with jquery ajax
Hello,
You will need to prepare the DOM content that is used to hold the scrolling parts.
Then you will need to stop the ticker, replace the contents and start the ticker again.
Cheers,
Peter