I made this bit of code that uses jQuery in a simple HTML file to see if my son would think it is fun/interesting and to help me with my jQuery skills. The thing that was hard was the selectors towards the bottom of the script block. I am wondering if there is a better way to do this. Warning: it auto-refreshes to 're-pixel' the screen (for lack of a better word).
Also I am building tables but I am sure they are not right, it was my intention to grab the innerwidth
and innerheight
and create a table that is divided into fractional squares that perfectly fill the view-able browser screen. I had trouble getting the logic right.
Also, I had to place a span tag in side the <td>
blocks so the wouldn't collapse on me. I wanted to do this in divs but I wasn't sure how to get the same effect.
$(document).ready(function () {
// find random colors
function colorMe() {
var newColor = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6);
return newColor;
}
// not sure about this but i got it to work in some wierd way.
var wb = Math.floor(window.innerWidth / 200);
var hb = Math.floor(window.innerHeight / 200);
// table buildout append cells and rows to the table.
// Note the yucky span tag to prevent td collapse
var table = $('<table border=1 bordercolor=white cellpadding=0 cellspacing=0 width="100%" height="100%"></table>');
for (i = 0; i < 100; i++) {
row = $('<tr></tr>');
for (j = 0; j < 200; j++) {
var row1 = $('<td bgcolor="' + colorMe() + '" width="' + wb + '"></td>').html('<div style="display:inline-block;height:' + hb + 'px;"></div>');
table.append(row);
row.append(row1);
}
}
// table to body append
$('body').append(table);
// mouse event to emulate a pen commenting out the last two give it a fun calligraphy look
$("td").hover(function () {
var whoIsMe = $(this).index();
$(this).stop()
.animate({
"opacity": "0"
}, "fast");
$(this).next("td")
.stop()
.animate({
"opacity": "0"
}, "fast");
$(this).prev("td")
.stop()
.animate({
"opacity": "0"
}, "fast");
$(this).parent()
.next()
.children("td")
.eq(whoIsMe)
.stop()
.animate({
"opacity": "0"
}, "fast");
$(this).parent()
.prev()
.children("td")
.eq(whoIsMe)
.stop()
.animate({
"opacity": "0"
}, "fast");
});
// eventually reload for a fresh palette of colored squares
setTimeout(function () {
window.location.reload(1);
}, 50000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Here is a link to a jsfiddle.