An algorithm for splitting divs

Hi!

My friend gave me a challenge to complete in JS. I can’t figure it out on my own and said to him that I give up, but I’m still curious. Any ideas?

Challenge:

  1. There is a div which is a rectangle with:
    width = x
    height = y

  2. Make an algorithm for splitting them into two exactly the same rectangles with:
    width = x/2
    height = y

I know how to make an algorithm for just doing the basic math but have no clue on how to connect it to real HTML DOM element.

you probably need to get a reference to the original rectangle (getElementBy…), then get its height, width. after it append (append) as much divs as you want to parent div, and set attributes (setAttribute) for appended divs as needed. most of what you may need for this task is documented here: https://developer.mozilla.org/en-US/docs/Web/API/element

You can use jQuery to manipulate the DOM elements.

There are several jQuery functions you can take advantage of… clone, css, after, etc.

assume the div is like this and the width is inline css.

<div id="dx" style="width:50px;height:50px;background-color:red;"></div>

i probably do something like :

let refDiv = document.getElementById("dx") // getting the ref of the original div.
let clonedDiv = document.getElementById("dx").cloneNode(true) // cloning the original div
clonedDiv.id="dy" // change the id to keep the id unique
let half = parseInt(refDiv.style['width'])/2 // divide the original div
refDiv.style['width'] = half + "px" // assume the width is on px
clonedDiv.style['width'] = half + "px" // assume width is px
clonedDiv.style['backgroundColor'] = "yellow" // just to differentiate the color
refDiv.parentNode.insertBefore(clonedDiv, refDiv)

To begin with, you need to get several values: the container of the rectangle, the rectangles itself, and the dimensions of the rectangle. You can do this with jQuery, I just used the DOM:

// Get a reference to the elements
const originalRect = document.getElementById('rect')
const container = originalRect.parentElement

// Get the original dimensions of first rectangle
const originalWidth = originalRect.offsetWidth
const originalHeight = originalRect.offsetHeight

You will then want to delete the original rectangle and add two new ones with half of its original width:

// Remove the original element so that we can add two equal ones in its place
container.removeChild(originalRect)

// Create the new rectangles
let newRect1 = document.createElement("div")
newRect1.style.width = originalWidth / 2 + 'px'
newRect1.style.height = originalHeight + 'px'

let newRect2 = document.createElement("div")
newRect2.style.width = originalWidth / 2 + 'px'
newRect2.style.height = originalHeight + 'px'

container.appendChild(newRect1)
container.appendChild(newRect2)

If you get stuck with stuff like this in the future, I suggest googling it, ex: “how to add two equal elements to a parent element”

You can view my finished project here:

1 Like

Thanks guys! That made me think and now I know there is much to learn :wink:

Note: I thought about jQuery before but wasn’t sure about the outcome. Still I tried now with jQ and I’m convinced that with jQ you can only set exact measurements e.g


.css(“width”, 200px)

than creating an algorithm for giving an outcome of “width/2”. Am I wrong?

Why do you think so?

jQuery is just a library for manipulating the DOM. Use plain JS for calculations and pass your variable to the jQuery call.

1 Like

Yes.

$('div').css('width', originalWidthOfRect / 2 + 'px')

True even if you used a percentage width in css:

/* css */
.rect {
  width: '10%';
}

// javascript...
let originalWidth = $('.rect').width() // Will be in pixels not percentage

// Note: if you are using pixel based widths, it is easier to use jQuery width function over jQuery css.
// Understand that when using width function you do not need to add px to end, but if you are using $.css,
// you will have to add 'px' to the end like my first example.
$('.newDiv').width(originalWidth / 2)

// if you would like to give the new element a percentage width, you could do it like this:
let originalWidth = $('.rect').width()
let parentWidth = $('.rect').offsetParent().width()
let percentValue = 100 * (width / 2) / parentWidth

$('.newDiv').css('width', percentValue + '%')
1 Like

Thanks for the informative responses! :wink: I wasn’t aware that you can set jQ values as a math ( i.e. originalWidthOfRect / 2) so it will definitely help me a lot. And placing new divs in the old one is an answer to my positioning problem which now occurred :wink: