JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<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>

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;
}

JavaScript

/**
 * Horizontal Stock Ticker for jQuery.
 *
 * @package jStockTicker
 * @author Peter Halasz <[email protected]>
 * @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;
            }
...