JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="mainlist" >
        <ul id='list'></ul>
    </div>
    <div id="maininfo">
         <div id="info_logo"></div> 
        <div id="info_name"></div> 
        <div id="info_time"></div> 
         <div id="info_p"></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:#999;
    box-shadow:inset 0px 0px 20px #222;
}

#mainlist,#maininfo{
    height:455px;
    position:fixed;
    overflow:hidden;
   border: 1px solid black;
    box-shadow:0px 0px 10px #000;
   
    border-radius:5px;
    width:470px;
    top:40px;
}
#mainlist{
    left: 20px;    
}
#maininfo{    
    left:490px;
    background-color:#ddd;
    box-shadow:inset 10px 0px 20px #222;
}


ul#list li img{
    float:left;
    background-color:#222;
    width:40px;
    height:30px;
    margin-top:6px;
    border:1px solid #111;
    border-radius:4px;
    box-shadow:0 0px 20px #099;
}
#info_logo{
    position:absolute;
    top:10px;
    left:350px;
    border:1px solid black;
    background-color:#111;
    border-radius:10px;
    box-shadow:0px 30px 30px -5px #555;
    width:100px;
    height:75px;
    border:1px solid #111;
}
#info_name{
  position:absolute;
  top:0px;  
  padding:10px;
  margin-left:10px;
  #background-color: #EEE;
  width:290px;
    height:50px;
    font-size:2em;
    text-shadow:0 10px 20px #000;
}
#info_time{
  position:absolute;
  top:80px;  
  padding:10px;
  margin-left:10px;
  #background-color: #EEE;
    color:#45f;
  width:290px;
    height:50px;
    font-size:2em;
    text-shadow:0 10px 20px #115;
}
#info_p{
    position:absolute;
    top:150px;
    #box-shadow:inset 0px 0px 50px #444;
     padding:10px;
    margin:20px;
    height:262px;
    width:410px;
    #color:white;
    font-size:1.5em;
    #background-color: #EEE;
    overflow:hidden;
    border-radius:10px;
    text-shadow:0 5px 10px #444;
}
#chnr{
    float:left;
    margin:0px;
    margin-top:10px;
    width:40px;
    text-align:center;
}

#list{
    margin:0;
    padding:0;
    #padding-left:20px;
}

ul#list li .pname{
    position:absolute;
    font-size: 10px;
    padding-left:10px;
    padding-top:1px;
    width : 110px;
    float:left;
   ...

JavaScript

var chlist = [];
        var scroll = 0;
        var scrollGap = 45.5;        
        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 () {
                var item = chlist[$("div",this).first().attr('alt')];
                $(this).css({"background-color":"#ddd","color":"black" })
                .delay(5000)
                .css({"box-shadow":"inset 0px 0px 30px #222" });
                  //.append('#maininfo');  
                  $('#info_p').html( item.epg.current.title + "<br/>" + item.epg.current.info );
                  $('#info_name').text( item.name );
                  $('#info_time').text( timeToString( item.epg.current.begin) + " - " + timeToString( item.epg.current.end) );
                  
                  
                  
                  $('#info_logo').html("<img src='" + "http://rtv.eu01.aws.af.cm/logos/types/white/100X75/" + item.id + ".png' />");
              },
              function () {
                  $(this).css({"background-color":"#333","color":"white" });
              }
            );  
        $("#list2 li").hover(
              function () {
                  $(this).css({"border-color":"#c55311" });
              },
              function () {
                  $(this).css({"border-color":"#111"});
              }
            ); 
         $("#list li").eq(selected).trigger('hover').trigger('mouseover');
        $("#list2 li").eq(selected).trigger('hover').trigger('mouseover');
       ...