Looking for a solution to create a background that adjusts the number of square divs based on the size of the container, which changes when resizing the window.
I tried referencing examples from this post here to add the divs. However, the issue arises when resizing the screen as it keeps multiplying the number of divs. Is there a way to limit the squares to fit within the container size or handle the overflow?
(Avoiding a simple css overflow:hidden solution to prevent an excessive multiplication of divs.) As I am new to JavaScript, any guidance would be greatly appreciated!
let contain = document.getElementById("squareContain");
let width = contain.offsetWidth;
let height = contain.offsetHeight;
var containerArea = width * height;
var canAdd = Math.floor(containerArea/1600); //For 40px x 40px squares
function multiplyNode(node, count, deep) {
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
$(window).on("resize", function(){
multiplyNode(document.querySelector('.square'), canAdd, false);
}).resize();
Edit jsfiddle