I'm currently attempting to append a specific number of div elements to the body without altering the width or height of the body itself. Essentially, I need the new divs to remain within the viewport. Here is the code I'm working with:
divAmount = 6;
$(document).ready(function(){
windowWidth = $(window).width();
windowHeight = $(window).height();
game();
$('body').css({
"max-width" : windowWidth,
"max-height" : windowHeight
});
});
function game(){
for (var i = 0; i < divAmount; i++) {
$("<div class='box' />").appendTo("body").css({
"margin-left" : Math.floor(Math.random() * windowWidth - 100) + 1,
"margin-top" : Math.floor(Math.random() * windowHeight - 100) + 1
});
}
$('.box').click(function(){
$(this).removeClass('box').addClass("exploding");
});
};
While the current code correctly adds the divs, they are unfortunately not staying within the viewport.