JSFiddle - React, Tailwind, and code Playground

by apasaja

HTML

<p>
    <h1>Horizontal scrolling</h1>
    <button class="shift right"      value="leftright"   >&gt;</button>
    <button class="shift horizontal" value="leftright  Ah">A</button> <button class="shift horizontal" value="leftright Bh">B</button>
    <div id="leftright">
        <span id="Ah"> AAAAAAA text AAAAAAA </span>
        <span id="Bh"> BBBBBBB text BBBBBBB </span>
        <span id="Ch"> CCCCCCC text CCCCCCC </span>
        <span id="Mh"> MMMMMMM text MMMMMMM </span>
    </div>
    <button class="shift left"       value="leftright">&lt;</button>
    <button class="shift horizontal" value="leftright Ch">C</button> <button class="shift horizontal" value="leftright Mh">M</button>
</p>

CSS

#updown, #leftright{
        position: relative;  
        overflow: hidden;    
        line-height: 1.5em;
        height: 1.5em;
        width: 20em;
        border: 2px solid #000;
    }
    #updown div {
        position: absolute;
        height: 1.5em;
        width: 20em;
        margin: 0;
        padding: 0;
        border: 0;
    }
    #leftright span {
        position: absolute;
        display: inline;
        float: left;
        height: 1.5em;
        width: 20em;
        margin: 0;
        padding: 0;
        border: 0;
    }

JavaScript

$('#leftright span').each(function(i){        // position the "spans"
        var $this = $(this);
        var amount = $this.parent().width();
        $this.css({left: i * amount});
    });        
        
    $('.shift').click(function(){
        var $this   = $(this);
        var value   = $this.attr('value');
        var values  = value.split(/ +/);
        var items   = '#' + values[0];
        var item    = (values.length == 2) ? '#' + values[1] : '';
        var classes = $this.attr('class');
        console.log(values);
        console.log(items);
        console.log(item);
        if (classes.match(/\bup\b/))               {    // up - Use "match" instead of hasClass() for performance
            var amount =$(items).height();
            $(items).children().animate({top:  '-=' + amount}, 'slow');
        } else if (classes.match(/\bdown\b/))      {    // down         
            var amount =$(items).height();
            $(items).children().animate({top:  '+=' + amount}, 'slow');
        } else if (classes.match(/\bleft\b/))       {    // left
            var amount = $(items).width();
            $(items).children().animate({left: '-=' + amount}, 'slow');
        } else if (classes.match(/\bright\b/))      {    // right
            var amount = $(items).width();
            $(items).children().animate({left: '+=' + amount}, 'slow');
        } else if (classes.match(/\bvertical\b/))   {    // vertical
            var amount = $(item).css('top');
            console.log("amount=", amount);
            $(items).children().animate({top:  '-=' + amount}, 'slow');
        } else if (classes.match(/\bhorizontal\b/)) {    // horizontal
            var amount = $(item).css('left');
            $(items).children().animate({left: '-=' + amount}, 'slow');
        } else {
            console.log("EEERRROOORRR");
            return false;
        }
    });