JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="genrepage">  
    <div id="genres"><div id="genreselect"></div></div>  
    <div id="genretitle"></div>
</div>

    <button id="left">left</button>
    <button id="right">right</button>

CSS

#genreselect{
    position:fixed;
    width:128px;
    height:128px;
    background-image:url("http://mywidget.tv/ktv/newrus/img/vod/genre_sel.png");
#background-color:#111;
    display:none;
#border:1px solid black;
}

.itemdummy{
    position:absolute;
    top:370px;
    width:100px;
    height:400px;
}

.genreitem{
    position:relative;
    width:128px;
    height:128px;
    float: left;
    margin-right:15px;
    margin-left:15px;
    background-image:url("http://mywidget.tv/ktv/newrus/img/vod/genre.png");
#background-color:#E87505;
#border:1px solid black;

}

#genretitle{
    position:fixed;
    top: 415px;
    left: 120px;
    width:720px;
    height:90px;
    #background-color:red;
color:white;
    text-align:center;
    font-size:4.5em;
    /*
    #text-shadow: 0px 55px 30px #fff;
    #text-shadow: 0 -1px 10px #FFFFFF, 0 1px 10px #666666;
    #text-shadow: 3px 3px 0 #707070, 5px 5px 0 #EEEEEE;

    */
    text-shadow:
    0 -1px 10px rgba(255, 150, 0, 0.4),
    0 1px 10px rgba(255, 150, 0, 0.4),
    1px 1px 10px rgba(255, 150, 0, 0.4),
    -1px 0 10px rgba(255, 150, 0, 0.4),
    1px 0 10px rgba(255, 150, 0, 0.4);
}

.genreitemtext{
    position:absolute;
    text-align:center;
    width:128px;
    color:white;
    top:90%;
    left:0px;
    display:table-cell;
    font-size:1em;
    #background-color:red;
    
}
.genreitemcount{
    position:absolute;
    text-align:center;
     width:170px;
    color:white;
    top:50%;
    left:0px;
    display:table-cell;
    font-size:1.2em;
}

#genres{
    position:fixed;
    left:10px;
    top:20px;
    width:950px;
    height:400px;
    overflow:hidden;
#background-color:#222;
}

#genrepage{
    top:0px;
    left:0px;
    height:540px;
    width:960px;
    background-color:#666;
}


button{
    position:absolute;
    top:510px;
    width:50px;
}
#right
{
    left:70px;
}

JavaScript

var genreurl = "https://dl.dropboxusercontent.com/u/20956652/samsung/tmp/vod_genres.txt";
var genres = [];

jQuery(document).ready(function($) {

    $.get( genreurl , function( gen ){
        onVODGenreList ( jQuery.parseJSON(gen) );    
        updateGenrePage();
    }).error( function( xj, status, info ){ alert(  genreurl + status + info); });   
    /*
    $("#right").click(function(){  
        alert("right");
    });
    $("#left").click(function(){
        alert("left");
    });*/
});


function getOffset( el, xadd, yadd ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft ;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    _x += xadd;
    _y += yadd;
    return { top: _y, left: _x };
}

function onVODGenreList ( data ){
    if( !data  ) return;

        //alert("VOD.onVODGenreList " + data.genres.length);

        if( data.genres && 0 == data.genres.length ){return; }
        
        genres = data.genres;
}


function updateGenrePage()
{
    //alert("updateGenrePage len:" + genres.length );
    $(".genreitem").remove();
    var startidx = 0;
    var idx = 0;

    for( var count=startidx;count < genres.length && idx < 20;count++,idx++ ){
        addGenreItem( genres[count] );
    }
}
function addGenreItem( genre )
{
    if( null == genre.count ){
        count = "";//Math.floor((Math.random()*100)+1);
    }
    else{
        count = genre.count;
    }
    //if( genre.id == 888 || genre.id == 777 ){ count = ""; }
    //if( 0 != count || genre.id >= 777)
    {
        var newgenre = $("<div class='genreitem'><div class='genreitemcount'>"+ count +"</div><div class='genreitemtext'>"+genre.name+"</div></div>");
        $("#genres").append( newgenre );
    }    
}