My current project involves creating a sketchpad using jQuery for an Odin Project assignment. However, I have encountered an issue with filling the canvas (wrapper div) with pixels (pixel divs). The canvas does not populate correctly. Here is the link to my code on jfiddle:
http://jsfiddle.net/c3sq2jmb/2/
Below is the code snippet:
HTML:
<body>
<div class="wrapper">
</div>
</body>
CSS:
.wrapper {
height: 300px;
width: 300px;
}
.pixel {
display: inline-block;
background-color: black;
margin:0;
vertical-align: top;
float:left;
}
JS/jQuery:
$(document).ready(function(){
createGrid(16);
});
function createGrid(number) {
for(var i = 0;i <= number*number;i++) {
$('.wrapper').append('<div class="pixel"></div>'); //adds pixels based on user command, default 16
}
$('.pixel').height($('.wrapper').height()/number);
$('.pixel').width($('.wrapper').width()/number);
}
$('.pixel').hover(
function() {
$(this).css('background-color', 'white');
}
);
Furthermore, there is a secondary question related to the hover function behavior discrepancy between jfiddle and Chrome browser. On jfiddle, the hover effect works as intended, but it fails in Chrome. Any insights into why this might be happening?
PS: Although my project is still work-in-progress, I've reached a roadblock in resolving this issue.