JSFiddle - React, Tailwind, and code Playground

by mayooresan

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page" data-theme="b" id="jqm-home">            
   <div class="categories">                
            <ul>                    
                <li><span><a href="" data-role="button" data-inline="true" >ABC</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >DEF</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >GHI</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true">JKL</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >ABC</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >DEF</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >GHI</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >JKL</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true">ABC</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >DEF</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >GHI</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true">JKL</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >ABC</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >DEF</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >GHI</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >JKL</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >ABC</a></span></li>
                <li><span><a...

CSS

div.sc_menu {
    /* Set it so we could calculate the offsetLeft */
    position: relative;
    height: 250px;
    width: 300px;
    overflow: auto;
}
ul.sc_menu {
    display: block;
    height: 200px;
    /* max width here, for users without javascript */    
    width: 1500px;   
    padding: 15px 0 0 15px; 
    /* removing default styling */
    margin: 0;
    background: url('navigation.png');        
    list-style: none;
}
.sc_menu li {
    display: block;
    float: left;    
    padding: 0 4px;
}
.sc_menu a {
    display: block;
    text-decoration: none;
}
.sc_menu span {
    /* display: none; */
    margin-top: 3px;
    
    text-align: center;
    font-size: 12px;    
    color: #fff;
}
.sc_menu a:hover span {
    display: block;
}
.sc_menu img {
    border: 3px #fff solid;    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.sc_menu a:hover img {
    filter:alpha(opacity=50);    
    opacity: 0.5;
}
 
 
/* Here are styles for the back button, don't look at them */
#back {
    display: block;
    width: 500px;
    text-align: center;
    color: #003469;
    font-size: 16px;
}

JavaScript

$(function(){           
    var step = 1;
    var current = 0;
    var maximum = $(".categories ul li").size();
    var visible = 2;
    var speed = 500;
    var liSize = 120;
    var height = 150;    
    var ulSize = liSize * maximum;
    var divSize = liSize * visible; 

    $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
    $(".categories ul li").css("list-style","none").css("display","inline");
    $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");

    $(".categories").swipeleft(function(event){
        if(current + step < 0 || current + step > maximum - visible) {return; }
        else {
            current = current + step;
            $('.categories ul').animate({left: -(liSize * current)}, speed, null);
        }
        return false;
    });

    $(".categories").swiperight(function(){
        if(current - step < 0 || current - step > maximum - visible) {return; }
        else {
            current = current - step;
            $('.categories ul').animate({left: -(liSize * current)}, speed, null);
        }
        return false;
    });         
});