Maintain same overflow value of child when increasing/decreasing width of parent

I have a image inside of a div. The image is overflowing and I want to keep that same amount of overflow when I increase or decrease the width of the div.

I know this can be done easily with a different approach than the one i’m using, but I need to know what i’m missing in my calculations. I can’t figure it out on my own

I uploaded the code here. (Codepen)

Can someone pls take a look?

You seem initially to be making the div 30px smaller than the image. Is that what you want to maintain so that there is always 30px more image showing at the bottom of the black or were you looking for a percentage value?

If it was just 30px always then wouldn’t you just need to set the div height as you did on load.

e.g Roughly like this:

var mouseDown;
var clientX;
var clientY;
var c = 0;

window.onload = function () {
  document.querySelector("div").style.width = "200px";
  document.querySelector("div").style.height =
    document.querySelector("img").getBoundingClientRect().height - 30 + "px";
};

window.onmousedown = function (event) {
  mouseDown = true;
  clientX = event.clientX;
  clientY = event.clientY;
};

window.onmouseup = function (event) {
  mouseDown = false;
};

window.onmousemove = function (event) {
  if (mouseDown) {
    var parentDiv = document.querySelector("div");
    var childImg = parentDiv.firstElementChild;
    parentDiv.style.width =
      parseInt(parentDiv.style.width) + event.clientX - clientX + "px";
    var newImgHeight = childImg.getBoundingClientRect().height;
    parentDiv.style.height = parseInt(newImgHeight) - 30 + "px";
  }
  clientX = event.clientX;
  clientY = event.clientY;
};

However you may be better off waiting for someone who knows what they are doing :slight_smile:

1 Like

Thanks for your reply.

You seem initially to be making the div 30px smaller than the image.

Yes, that’s the plan. Just to create the starting overflow.

However you may be better off waiting for someone who knows what they are doing

No man, your solution is good but I can’t just ignore this. Have to figure out why javascript is behaving like this. The calc seems correct and I don’t want to lose my warm feelings towards js

If we focus on this part maybe we can figure it out:

var oldImgHeight = childImg.getBoundingClientRect().height;
parentDiv.style.width =
parseInt(parentDiv.style.width) + event.clientX - clientX + "px";
var newImgHeight = childImg.getBoundingClientRect().height;

parentDiv.style.height =
parseInt(parentDiv.style.height) + (newImgHeight - oldImgHeight) + "px";

Before ParentDiv gets a new width the height of the image is stored in “oldImgHeight”
Then parentDiv gets a new width so the childImg automatically increases in both width and height.
Then the new image height is stored in “newImgHeight”

The difference between newImgHeight and oldImgHeight should be the correct value to += on parentDiv height. This should maintain the overflow but doesn’t, so what’s going on :expressionless:

Adding a console statement here for oldImgHeight and newImgHeight gives the same size for both!

 var oldImgHeight = childImg.getBoundingClientRect().height;
    parentDiv.style.width =
      parseInt(parentDiv.style.width) + event.clientX - clientX + "px";
    var newImgHeight = childImg.getBoundingClientRect().height;

    console.log(oldImgHeight + " - " + newImgHeight);

The problem is with the last line where you try to set the height using the style object. If you change it to this it works.

   /* parentDiv.style.height = parseInt(parentDiv.style.height) + (newImgHeight - oldImgHeight) + "px";*/
       parentDiv.style.height =
      parentDiv.getBoundingClientRect().height +
      (newImgHeight - oldImgHeight) +
      "px";

I believe it’s something to do with style it be being basically read only in some respects but a JS guro could confirm please. :slight_smile:

1 Like

Unfortunately, that does not work either.

In the beginning, the image overflows about 20%. Then if you decrease the width, the overflow will eventually be 100%.

This is strange

It’s working for me but you do need to put the newImgHeight variable at the top because it will get hoisted. (That’s why it was reading the same when you compare.)

e.g.


 {
    var parentDiv = document.querySelector('div');
    var childImg = parentDiv.firstElementChild;
    var newImgHeight = 0;
    var oldImgHeight = childImg.getBoundingClientRect().height;
    parentDiv.style.width = parseInt(parentDiv.style.width) + event.clientX - clientX + "px";
   newImgHeight = childImg.getBoundingClientRect().height;

    /*parentDiv.style.height = parseInt(parentDiv.style.height) + (newImgHeight - oldImgHeight) + "px";*/
    
    parentDiv.style.height =
      parentDiv.getBoundingClientRect().height +
      (newImgHeight - oldImgHeight) +
      "px";
    
    
  }

I must be misunderstanding what you wanted because you said “The image is overflowing and I want to keep that same amount of overflow when I increase or decrease the width of the div.”.

You added 30px overflow and the code above will maintain that 30px all the way up and down.

e.g.

Screenshot 2021-12-14 at 20.31.39

The purple is 18px and the image sticks out 30px which was what I thought you wanted. If you were looking for a percentage value instead then that would require a little bit of tweaking.

However with regards to the original problem the code is now doing what it was told to do :slight_smile: It may not be what you want but we can work it from here.

e.g. if you wanted a percentge calculation then you’d just do this.

  /*
    parentDiv.style.height =
      parentDiv.getBoundingClientRect().height +
      (newImgHeight - oldImgHeight) +
      "px";
    */
     parentDiv.style.height =  newImgHeight * .75 + "px";

No you have not misunderstood, you are correct.I mixed up this question with another question I have asked.

But the reason it worked better with “boundingRect” instead of “style” is maybe becuase it return more accurate values?

1 Like

Yes that’s possible. The style part is definitely the problem area (for whatever reason) and is what threw us off the scent as it seemed to be working.

Hopefully you can work out what you want to do from here.:slight_smile:

Thank you for taking the time to familiarize yourself with the code, it is appreciated

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.