<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>
<meta charset=utf-8 />
<title>Ghost Legs | Thomas Park</title>
<style>
table {
font-family: 'Just Me Again Down Here', cursive;
font-weight: bold;
font-size: 24px;
text-align: left;
}
.ghostleg {
margin: 30px auto 80px auto;
border-spacing: 0px;
border-collapse: collapse;
}
.ghostleg th, .ghostleg td {
width: 150px;
height: 40px;
padding-left: 5px;
border-style: solid;
border-color: black;
border-width: 0 0 0 3px;
}
.ghostleg thead th {
vertical-align: top;
}
.ghostleg tfoot td {
vertical-align: bottom;
}
.ghostleg .ghostrung {
border-width: 0 0 3px 3px;
}
.ghostleg .ghostgray {
border-color: #BBBBBB;
color: #BBBBBB;
}
.ghostleg .ghostred {
border-color: #B70F08;
color: #B70F08;
}
.ghostleg .ghostredleft {
border-left: 3px solid #B70F08;
}
.ghostleg .ghostredbottom {
border-bottom: 3px solid #B70F08;
}
</style>
</head>
<body>
<table class="ghostleg">
<thead>
<tr><th>Sandwich</th><th>Tacos</th><th>Pizza</td><th>Korean BBQ</th></tr>
</thead>
<tfoot>
<tr><td>No</td><td>No</td><td>Lunch</td><td>Dinner</td></tr>
</tfoot>
<tbody>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
</body>
</html>
var rungs = [];
/* Randomize and draw rungs */
$('.ghostleg tbody>tr').each(function(index){
var legs = $(this).children().size();
var randomleg = Math.ceil(Math.random() * legs);
if(randomleg < legs){
$('td:nth-child('+randomleg+')', this).addClass('ghostrung');
}
rungs.push(randomleg);
});
/* Highlight path on hover */
$('.ghostleg th, .ghostleg td').each(function(index){
$(this).mouseover(function(event){
var column = (index % 4) + 1;
$('.ghostleg th, .ghostleg td').addClass('ghostgray');
$('.ghostleg thead th:nth-child('+column+')').addClass('ghostred');
for (var i = 0; i < rungs.length; i++){
var row = i + 1;
var that = '.ghostleg tbody tr:nth-child('+row+')>td:nth-child('+column +')';
if (rungs[i] == 4 || rungs[i] > column || rungs[i] < (column - 1)){
$(that).addClass('ghostred');
} else if (rungs[i] == column){
$(that).addClass('ghostred');
column = column + 1;
} else {
$(that).addClass('ghostredleft');
column = column - 1;
$('.ghostleg tbody tr:nth-child('+row+')>td:nth-child('+column +')').addClass('ghostredbottom');
}
}
$('.ghostleg tfoot td:nth-child('+column +')').addClass('ghostred');
event.stopPropagation();
}).mouseleave(function(){
$('.ghostleg th, .ghostleg td').removeClass('ghostgray ghostred ghostredleft ghostredbottom');
});
});
$('.ghostleg').mouseover(function(){
$('th, td', this).addClass('ghostgray');
});
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. |