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
Is there a way this can be used with the data from Google Finance?
any example?
Yes there is. It involves creating a function that parses the output of google finance and create the structure for the ticker.
I’ll try to add support for Google and Yahoo finance in a future release.
Do you have any update for this ticker to be used with Data from Google Finance or Yahoo Finance?
Hello Jared,
My life is really busy and I had no time to add improvements to this plugin.
Cheers,
Peter
Hi i am trying to use your stocp picker to display data but it seems to be choppy it is not a smooth scrolling text.
Yes it is an issue with how the width of the spans are calculated.
Is it possible to do something to make it smoother?
There are some suggestions on the other page of comments.
$ticker.children().first().outerWidth(true)
works fine
Thanks guys for picking it up this fast.
I really need to find the time to write the updated version. My apologies.
Okay I updated the examples page to point to gihub and update the code as well. There is a new post to show where to find the files.
Hey there, just stumbled upon your blog through Google, and found it to be really informative. I’m gonna keep an eye on this one. Cheers!
Hi,
Great Work !!
But i have a problem using that.
If i have lots of Quotes (more than 100 ) inside the div tag then the ticker just breaks. How will it work for ‘n’ number of Stock Quotes??
Hello,
This happens because the container element is not wide enough.
For now the solution is to change the following
Just change the 2 to something higher until everything looks correct.
I’ll try to correct this in a future version.
Ok seems working!
I need a help in dynamically updating the ticker content. Like after every 15seconds i will be updating the quotes data. How should i procedd? Should I just change the innerHTML of the div or should i iterate through each span and change their innerHTML. It may also happen that there will be a new quote entry. How should i procedd. Your help will save my time.
Thank you.
Not sure which approach would be better to update the data.
Changing the innerHTML might cause the display of the ticker to flicker a bit, not sure tho, didn’t test it.
Iterating through 100+ items might be too much of a hassle and 15 seconds might be already up and the next update could kick in when the previous is not yet finished.
Hi Peter,
This is a brilliant plugin, one which i am now using.
What i am now after is having the text going vertical, bottom – top.
Were there any thoughts of including this in a future release.
Thanks, Jonathan
Hi Jonathan,
There were no plans in including it in the near future.
I am currently working on an improved version with automatic updates.
Cheers,
Peter
Hi Peter,
I myself is also working on a continuous ticker. Which will auto update, with less or no flicker. But i m not using any 3rd party javascript. Anyone wanna be a part of this can email me at thinkmmk@gmail.com.
Does anyone know of a similar javascript that will give similar functionality to this but vertical scrolling? Thanks
Hi all,
How do i manually stop and restart my ticker – with for instance a text link or button?
Hello,
You’ll probably need to listen to a click event on the link or button and call the startTicker/stopTicker functions.
Might need a little tweaking to get it to work.
Hope this helps.
Cheers,
Peter
Hey,
Have you had time to add the dynamic content?
Great plugin, Chris
Hi Chris,
Sorry, my life is really busy and have no real time to work on any of my projects :(
Cheers,
Peter
how do i update the dynamic values into the current scrolling ticker