Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<meta charset=utf-8 />
  
<title>TV Online</title>
</head>
<body>
  <div class="channels">
    <ul>
      <div id="shadow"></div>        </ul>
    <div class="container"></div>
  </div>
  
  <div style="display:none;" class="item">
    <span class="linkurl" data-channel-url="{{URL}}">
      <img class="imagelink" src="{{IMG}}" alt="">
      <h2 class="title">
        {{TITLE}}
      </h2>
    </span>
  </div>
  
</body>
</html>
 
.channels{
  width: 99%;
  
}
h2 {
  display: none;
}
ul {
  max-height: 500px;
  padding: 10px;
  margin:0;
  float: left;
  width: 70px;
  overflow: auto;
  background: #777;
}
li{
  margin: 5px 0;
}
.container {
  background: #aaa;
  height: 520px;
}
#shadow{
  width: 90px;
  box-shadow: inset 0px -21px 15px -13px rgba(0,0,0,.5);
  position: absolute;
  top: 508px;
  height: 20px;
  left: 8px;
  display: block;
}
img {
  cursor: pointer;
}
img:hover {
  box-shadow: 0 0 3px rgba(0,0,0,.5);
}
#linkurl{z-index:999;}
 
$(document).ready(function(){
  
  $("body").on("click", ".linkurl", function(){
    console.log('click-click');
  });
  var url = "http://pipes.yahoo.com/pipes/pipe.run?_id=bb1d5ce1d18dab1a143e5d691ea53061&_render=json";
  $.ajax({
    url: url,
    dataType: 'json'
  })
  .done(function(data) {
    items = data.value.items;
    //   console.log(items)
    count = items.count;
    var k=0;
    for (k in items){
      title = items[k].title;
      url   = items[k].url;
      image = items[k].image;
      //     console.log(image);
      
      var item = $("div.item")
      .clone().html()
      .replace("{{IMG}}", image)
      .replace("{{TITLE}}", title)
      .replace("{{URL}}", url);
      
      $("div.channels ul")
      .append($('<li>')
              .append($(item)))
      .show();
    }
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers