in this HTML file, there are a couple of divs that are absolute
I want to write a code in JavaScript that can tell me the row of each div. Whenever in vertical axes we are no box there is a row, for me problem is how can I tell my application "there is a row"!
here my HTML code:
<html>
<head>
<style>
.container {
width : 1170px;
margin : 0 auto;
position : relative;
}
.box {
position : absolute;
background : red;
width : 300px;
height : 300px;
color : #fff;
font-size : 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" style="top: 20px; left: 30px" id="box1">box1</div>
<div class="box" style="height:100px; top: 90px; left: 530px" id="box2">box2</div>
<div class="box" style="top: 1450px; left: 230px" id="box3">box3</div>
<div class="box" style="top: 550px; left: 630px" id="box4">box4</div>
<div class="box" style="top: 950px; left: 130px" id="box5">box5</div>
</div>
</body>
</html>
I want my code to work with more or fewer boxes so I think I should write a function but without understanding these rows I can't do that... Any advice?
Here is a simple example, first it find the rows min and max heights and then loops through all boxes and if the top border height is between a row top and bottom height it assigns that box to that row, and you will get an object with your boxes ids and the rows they are in: (rows numbers starts at 0, i used the array position to get it, but you can assign any number you want when creating the rows array ) here is a sample output:
[
{
"box": "box1",
"row": 0
},
{
"box": "box2",
"row": 0
},
{
"box": "box3",
"row": 3
},
{
"box": "box4",
"row": 1
},
{
"box": "box5",
"row": 2
}
]
let boxes = document.getElementsByClassName("box");
// construct an array with the rows
function getRow(fromHeight) {
const o = {};
for (var i = 0; i < boxes.length; i++) {
const boxRect = boxes[i].getBoundingClientRect();
if ((!o.top || o.top > boxRect.top) && boxRect.top > fromHeight) {
o.top = boxRect.top;
o.bottom = boxRect.bottom;
}
}
return o;
}
let rows = [];
let fromHeight = 0;
for (var i = 0; i < boxes.length; i++) {
let row = getRow(fromHeight);
if (Object.keys(row).length !== 0) rows.push(row);
fromHeight = row.bottom;
}
// console.log(rows);
// get array with every box row
let array = [];
for (var i = 0; i < boxes.length; i++) {
const boxRect = boxes[i].getBoundingClientRect();
var row = rows.findIndex(p => p.top <= boxRect.top && p.bottom >= boxRect.top);
array.push({box:boxes[i].id, row: row});
}
console.log(array);<html>
<head>
<style>
.container {
width: 1170px;
margin: 0 auto;
position: relative;
}
.box {
position: absolute;
background: red;
width: 300px;
height: 300px;
color: #fff;
font-size: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" style="top: 20px; left: 30px" id="box1">box1</div>
<div class="box" style="height:100px; top: 90px; left: 530px" id="box2">box2</div>
<div class="box" style="top: 1450px; left: 230px" id="box3">box3</div>
<div class="box" style="top: 550px; left: 630px" id="box4">box4</div>
<div class="box" style="top: 950px; left: 130px" id="box5">box5</div>
</div>
</body>
</html>