JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="mainlist" >
        <ul id='list2'></ul>
    </div>
    <div id="vodinfo">
        <img id="poster" src=""/>
        <div class="moviename"><span id="moviename"></span></div>
        <div class="pyear">ГОД:<span id="pyear"></span></div>
        <div class="director">РЕЖИCСЁР:<span id="director"></span></div>
        <div class="actors">АКТЁРЫ:<br/><span id="actors"></span></div>
        <div class="description">ОПИСАНИЕ:<br/><span id="description"></span></div>
    </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:#222;
}

#mainlist,#vodinfo{
    height:455px;
    position:fixed;
    overflow:hidden;
    border: 1px solid black;
    box-shadow:0px 0px 1px #000;
    background-color:#555;
    border-radius:5px;
    width:450px;
    top:40px;
}
#mainlist{
    left: 20px;    
}
#vodinfo{    
    left:490px;
}
#now{
    margin:10px;
    height:250px;
    width:93%;
    border-radius:5px;
padding:5px;
    position:absolute;
    box-shadow:0px 0px 1px #000;
    background-color:#999;
    color:#000;
    text-shadow: 0px 1px 1px #000;
}
img{
    float:left;
    border-radius:5px;
    background-color:#444;
    width:30px;
    height:40px;
    box-shadow:0px 0px 1px #444;
    margin-top:-2px;
    
}
#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: 16px;
    padding-left:6px;

    height:100%;
    float:left;
}

.pname,.year{
    font-size: 15px;
    padding-left:6px;
    width : 310px;
    overflow:hidden;
    height:50%; 
        white-space: nowrap;
    word-break: break-all;
	text-overflow: ellipsis;
}
.pinfo{
    position:absolute;
    font-size: 10px;
    padding-left:5px;
    width : 147px;
    height:100%;
    overflow:hidden;
    white-space: xnowrap;
    word-break: break-all;
	text-overflow: ellipsis;
    hyphens: auto;
    float:left;
}
.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;
   ...

JavaScript

var vodlist =[];
        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.dropboxusercontent.com/u/20956652/samsung/moidom/api/vod_list.txt", function(data){
        selectedMax = 0;
        
        for( var idx in data.rows ){
                var item = data.rows[idx];
                vodlist[selectedMax] = item;
                addToList( item, selectedMax );
                selectedMax++;
        }

        pageMax = parseInt( selectedMax/elementsInView );
        
        addToInfo( 0 );

        $("#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"});
              }
            ); 
        $("#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 checkScroll( nextItem, nextPage )
{
    $("#list2 li").eq(selected).trigger('hover').trigger('mouseout');
    var changepage = 0;
    if( 1 == nextItem ) {
        selected++;
        
    }else
    if( -1 == nextItem ) {
        selected--;
    }
    if( 1 == nextPage ) {
        selected+=elementsInView;
    }else
    if( -1 == nextPage ) {
        selected-=elementsInView;
    }
    
    if( selected < 0 ){
        selected = 0;
        changepage = 1;
    }
    if( selected > selectedMax ){
        selected...