JSFiddle - React, Tailwind, and code Playground

by heennkkee

HTML

<div id="sexymofo"></div>
<div class="ticker"></div>

CSS

.ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 100%;
    background-color: blue;
    color: yellow;
    display: inline-block;
}
.ticker .ticker-text {
    top: 0;
    height: 100%;
    padding: 2px;
}
#sexymofo {
    overflow:hidden;
    height:15pt;
    width:10000px;
}

JavaScript

document.getElementById('sexymofo').innerHTML = 'I have some news for you, here is some breaking news that is looping around and around on and on and never seems to end. But what if it ends?';
whatsup();
function whatsup () {
    console.log("hej");
    document.getElementById('sexymofo').style.marginLeft = (document.getElementById('sexymofo').style.marginLeft + 10) + "px";
    setTimeout(function(){
        whatsup();
    }, 1);
}


$.fn.ticker = function (options) {
        'use strict';

        var settings = $.extend({}, $.fn.ticker.defaults, options);
        var $ticker = $(this);
        var tickerdata = {
            'content': 'I have some news for you, here is some breaking news that is looping around and around on and on and never seems to end. But what if it ends?'
        };

        var docfragment = document.createDocumentFragment();
        var $tickerText = $('<span/>', {
            class: 'ticker-text',
            html: tickerdata.content + " | " + tickerdata.content
        }).appendTo(docfragment);
        $ticker.append(docfragment);

        var containerwidth = $ticker.width();
        var left = containerwidth;
        var width = $tickerText.width();

        function tick() {
            if (--left < -width) {
                left = 0;
            }
            $tickerText.css("margin-left", left + "px");
            setTimeout(tick, settings.speed);
        }
        tick();
        return this;
    }

    $.fn.ticker.defaults = {
        speed: 10
    };
	$('.ticker').ticker();