jQuery：在主体上附加计算所得的div

Question

I am calculating width and height of a box according to window's height and width and divided it by 12 to get 12 equal sized boxes on body.

I created this script to append box on body on click-

$('body').append('<div class="box"></div>');
        $('.box').css('display','block');

This i how i calculated width of this box-

var width=$(window).width();
var span12= width/12;

And for height -

 var height=$(window).height();
    var spanheight=height/12;

I want to append all the possible boxes on click event. Is that possible?

Fiddle

Answer 1

You need to define css properties for box every time you create a new <div> ,
Because $('.box').css('display','block'); will only make an effect to already loaded content.

http://jsfiddle.net/Em23e/8/

Answer 2

You can try it like this:

http://jsfiddle.net/Em23e/12/

it uses a loop to display the 12 boxes, or if you multiply it again with Number it will display all possible boxes in the screen.

The main issue in your calculation is that you don't take into account the 3px around each box.

margin: 3px;

Answer 3

Here is some working JavaScript code to replace the JavaScript you posted. This code loops through the body height and width and creates div tiles across the entire visible area.

Here is the fiddle: http://jsfiddle.net/yUqXs/5/

$(function(){
var winwidth = $(window).width();
var width=winwidth;
var span12= width/12;
var winheight = $(window).height();
var height=winheight;
var spanheight=height/12;

$('.button').click(function(){
    var $body = $('body');
    var totalw = 0;
    var totalh = 0;
    var totalw2 = span12;
    var totalh2 = spanheight;

    while (totalh2 < winheight)
    {
        totalw = 0;
        totalw2 = span12;
        while (totalw2 < winwidth)
        {
            $body.append('<div class="box" style="display: block; background: green; width: '+span12+'px; height: '+spanheight+'px; float: left; position: absolute; top: '+totalh+'px; left: '+totalw+'px;">&nbsp;</div>');
            totalw += span12;
            totalw2 += span12;
        }
        totalh += spanheight;
        totalh2 += spanheight;
    }
});
});

Answer 4

Not sure but Probably you want this, updated your code.

You need to update the css properties everytime you are adding the box. check this fiddle

Answer 5

Try using this

$(function(){

var width=$(window).width();
var span12= width/12;
var height=$(window).height();
var spanheight=height/12;

$('.button').click(function(){
$('body').append('<div class="box"></div>');
    $('.box').css('display','block');
    $('.box').css("height",spanheight);
    $('.box').css("width",span12);
    $('.box').css("background","green");
    $('.box').css("margin","10px");
});
});

What happen in your case is your div is appending to body but, it's height and width is '0', so you have to set it on click function.