<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |