JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="mainlist" >
        <ul id='list'></ul>
    </div>
    <div id="maininfo">
        <ul id='list2'></ul>
    </div>
    <button id="left">left</button>
    <button id="up">up</button>
    <button id="down">down</button>
    <button id="right">right</button>
</div>
<div id="debug"></div>
<div id="copyright" class="depth">by exe</div>

CSS

#main{
    position:fixed;
    margin:0;
    padding:0;
    height:540px;
    width:960px;
    border: 0px solid red;
    background-color:#999;
}

#mainlist,#maininfo{
    height:455px;
    position:fixed;
    overflow:hidden;
    border: 1px solid black;
    box-shadow:0px 0px 10px #000;
    background-color:#555;
    border-radius:5px;
    width:450px;
    top:40px;
}
#mainlist{
    left: 20px;    
}
#maininfo{    
    left:490px;
}
#now{
    margin:10px;
    height:250px;
    width:93%;
    border-radius:5px;
padding:5px;
    position:absolute;
    box-shadow:0px 0px 10px #000;
    background-color:#999;
    color:#000;
    text-shadow: 0px 1px 10px #000;
}
img{
    float:left;
    border-radius:5px;
    background-color:#444;
    width:40px;
    height:30px;
    box-shadow:0px 0px 5px #000;
    margin-top:4px;
    
}
#chnr{
    float:left;
    margin:0px;
    margin-top:8px;
    width:40px;
    text-align:center;
}
.id{
    width : 50px;
    float:left;
}
#list,#list2{
    margin:0;
    padding:0;
    padding-left:20px;
}


.pname{
    font-size: 10px;
    padding-left:6px;
    width : 60px;
    float:left;
    overflow:hidden;
    	text-overflow: ellipsis;
    height:100%;
}
.pinfo{
    font-size: 15px;
    padding-left:5px;
    width : 247px;
    height:100%;
    overflow:hidden;
    white-space: xnowrap;
    word-break: break-all;
	text-overflow: ellipsis;
    float:left;
    hyphens: auto;
}
.has_archive,.is_favorite,.is_not_favorite{
    height:100%;
    width:5px;
}
.has_archive{
    background-color:#AA0000;
    border-top-right-radius: 3px;
    border-bottom-right-radius:3px;
    float:right; 
}
.is_favorite{
    background-color:#BB6500;
    float:left;
     border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.is_not_favorite{
    float:left;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.ukraina{
    color:#FF9999;
    background-color: #555;
}
button{
    position:relative;
    top:510px;
   ...

JavaScript

var ukraina = [ 18, 20, 30, 17, 90, 101, 15, 62, 21, 19, 112, 106, 105, 55, 103, 104, 108, 84, 262, 263, 172, 173, 174, 486, 63, 32 ];


var chlist = [];
        var scroll = 0;
        var scrollGap = 45;        
        var elementsInView = 10;

        var selected = 0;
        var page = 0;
        var selectedMax = 0;
        var pageMax = 0;
$(function() {
    $.getJSON("https://dl.dropbox.com/u/20956652/samsung/tmp/channellist.txt", function(data){

        chlist = data.channels;
        selectedMax = data.channels.length;
        pageMax = parseInt( selectedMax/elementsInView );
        for( idx in data.channels ){
            var item = data.channels[idx];
            
            addToList( item, idx );
        };
        //addToInfo( 0 );
          $("#list li").hover(
              function () {
                  $(this).css({"box-shadow":"0px 0px 22px #c55311","color":"#F58341","border-color":"#c55311" });
              },
              function () {
                  $(this).css({"box-shadow":"0px 0px 12px #000","color":"#ddd","border-color":"#111"});
              }
            );  
        $("#list2 li").hover(
              function () {
                  $(this).css({"box-shadow":"0px 0px 22px #c55311","color":"#F58341","border-color":"#c55311" });
              },
              function () {
                  $(this).css({"box-shadow":"0px 0px 12px #000","color":"#111","border-color":"#111"});
              }
            ); 
         $("#list li").eq(selected).trigger('hover').trigger('mouseover');
        $("#list2 li").eq(selected).trigger('hover').trigger('mouseover');
        
        $("#down").click(function(){  
            checkScroll( 1, 0 );
        });
        $("#right").click(function(){  
            checkScroll( 0, 1 );
        });
        $("#up").click(function(){  
            checkScroll( -1, 0 );
        });
        $("#left").click(function(){
            checkScroll( 0, -1 );
        });
    });
    
   });
function...