1

This is a bit of a math problem mixes with some JavaScript, I have this adjustable div (https://i.stack.imgur.com/1Pwj9.jpg), when clicking on submit it will be filled entirely by 10 by 10 smaller div's.

But I don't quite know how to calculate how many row's of 10 by 10 div's will fit into the parent.

What I currently have is this code:

var w_items = Math.ceil(def_w / 10),
    h_items = Math.ceil(def_h / 10);

That give's me back the rounded width and height of said parent, don't know how to calculate how many would fit thought, do I add them together or something?

Nick09
  • 206
  • 2
  • 15
  • https://stackoverflow.com/questions/1435975/how-can-i-round-down-a-number-in-javascript – str Feb 24 '19 at 10:12

2 Answers2

1

Multiply the width and height of the parent div. You'll get its area. Then, the area of a small div is 100 because of 10x10=100. Then all you have to do is Math.floor(parentArea/smallDivArea) and you'll get the number of small divs that can fit into the big div.

The24thDS
  • 164
  • 8
  • sorry when I said 10x10 I actually meant `width 10px` and `height 10px` so 10 by 10 = 20px right? I am terrible at math I know :D – Nick09 Feb 24 '19 at 10:20
  • 2
    10 x 10 = 100, doesn't matter if they are `px` :) They could be `vh`, `em` and so on. As far that they are both the same unit 10 x 10 is equal 100 – The24thDS Feb 24 '19 at 10:22
0

If you floor (also known as integer division) the value instead of ceiling it, you will get the number of elements that can fit horizontally and vertically. The total count will be w_items * h_items.

  • No, floor means to round down. Ceiling is rounding up. You need Math.floor(width/10) * Math.floor(height/10) –  Feb 24 '19 at 10:21