jquery - adding divs but making them stay inside the viewport -
okay i'm trying append number of divs body without changing width or height of body. in other words new divs have stay inside viewport here code:
divamount = 6; $(document).ready(function(){ windowwidth = $(window).width(); windowheight = $(window).height(); game(); $('body').css({ "max-width" : windowwidth, "max-height" : windowheight }); }); function game(){ (var = 0; < 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"); }); }; this making divs added correctly; however, aren't staying inside viewport
here's working fiddle made - http://jsfiddle.net/kn3v3/
if give .box divs absolute positioning, kinda don't take space.
.box { background: red; height: 10px; width: 10px; position: absolute; } however, said above, should make container div height , width of window instead of body, , body 100% h/w. (that's i've done in fiddle)
Comments
Post a Comment