I got interested in js and css recently and looked up some nice examples on jsfiddle.
Is there a way to "export" the examples to my HD? I just cant manage to save them and make them runnable.Obviously just copy & pasting doesnt work. How do I need to modify this particular 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 google logo shows up, but that's it. There's no response from the script.
