Skip to content

Instantly share code, notes, and snippets.

@ivandeex

ivandeex/index.html

Created April 26, 2016 17:48
Show Gist options
  • Save ivandeex/36fd7dca9b250f7a635917b1b086ee8a to your computer and use it in GitHub Desktop.
Save ivandeex/36fd7dca9b250f7a635917b1b086ee8a to your computer and use it in GitHub Desktop.
Download ZIP
flash table cell when mouse hovers it
Raw
index.html
<html><head><title>test0</title>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/sprintf/src/sprintf.js"></script>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
transition: 0.1s ease-out;
}
.flash {
background-color: #ffc;
}
</style></head><body>
<table id="data"></table>
<span id="log"></span>
<script>
$(function() {
var $table = $("#data").detach();
for(var r=0; r < 20; r++) {
var $tr = $("<tr/>").appendTo($table);
for(var c=0; c < 20; c++) {
$(sprintf("<td>%d:%d</td>", r, c)).appendTo($tr);
}
}
$("body").append($table);
$table.on("mouseover", "td", function(e) {$(e.target).addClass("flash");});
$table.on("transitionend", "td", function(e) {$(e.target).removeClass("flash");});
setInterval(function() {
$("#data .flash").removeClass("flash");
$("#log").append(".");
}, 10000);
});
</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment