Recently, I developed an interest in JavaScript and CSS and came across some impressive examples on jsfiddle.
I was wondering if there is a way to "export" these examples to my computer. Simply copying and pasting doesn't seem to work. How can I modify this specific example: http://jsfiddle.net/MvFx9/
test.html
<html>
<head>
<link href='grid-overlay.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="grid-source"><img src="http://www.google.com/images/logos/ps_logo2.png"></div>
<script src="grid-overlay.js"></script>
</body>
</html>
grid-overlay.css:
#grid-source {
position: absolute;
}
#grid-overlay {
position: relative;
}
.hover {
background-color: rgba(0, 0, 0, 0.1) !important;
}
.unselected {
background-color: rgba(0, 0, 0, 0.5);
}
.selected {
background-color: none;
}
grid-overlay.js
var $src = $('#grid-source');
var $wrap = $('<div id="grid-overlay"></div>');
var $gsize = 10;
var $cols = Math.ceil($src.find('img').innerWidth() / $gsize);
var $rows = Math.ceil($src.find('img').innerHeight() / $gsize);
// create overlay
var $tbl = $('<table></table>');
for (var y = 1; y <= $rows; y++) {
var $tr = $('<tr></tr>');
for (var x = 1; x <= $cols; x++) {
var $td = $('<td></td>');
$td.css('width', $gsize + 'px').css('height', $gsize + 'px');
$td.addClass('unselected');
$tr.append($td);
}
$tbl.append($tr);
}
$src.css('width', $cols * $gsize + 'px').css('height', $rows * $gsize + 'px')
// attach overlay
$wrap.append($tbl);
$src.after($wrap);
$('#grid-overlay td').hover(function() {
$(this).toggleClass('hover');
});
$('#grid-overlay td').click(function() {
$(this).toggleClass('selected').toggleClass('unselected');
});
The script doesn't seem to respond beyond displaying the Google logo.