CODEWITHSUNDEEP
javascripthtmlcssresize
mbomb007
mbomb007

Reputation: 4251

Div resizing with mouse expands too fast

For fun, I am creating a widget that can be toggled to use vertical typing (e.g. for Japanese). The vertical part is being done with a div that is contenteditable. At the moment, you can see both the textarea and the div, and watch their content change in sync. The checkbox does nothing yet.

My problem is that the svg that is the "handle" to drag and resize was inside the editable div, and this would get messed up if the user cut from or pasted into the div. So that's the real problem I'm solving, and if there's a better fix, let me know. In an attempt to fix this, I am putting the editable div within another div that has the svg, in order that the internal editable div will not affect it.

After doing this, the resize functionality does not work correctly. After clicking down on the handle, the div resizes extremely fast downwards (it's height growing).

enter image description here

Here is what I was trying to do "working": https://jsfiddle.net/m4Ljuzyn/167/

And here is the one where the resize is broken after I changed the layout a bit: https://jsfiddle.net/m4Ljuzyn/190/

I am using pure JavaScript only.

Upvotes: 1

Views: 900

Answers (1)

Joshua Manns
Joshua Manns

Reputation: 585

The problem comes from the fact that offsetLeft and offsetTop are relative to the element's parent. You're using that relative value with the mouse event's clientX/Y value and it's producing undesired results.

Take advantage of getBoundingClientRect for proper coordinates in your mousemove handler.

var bounds = verticalTextarea.getBoundingClientRect();

verticalTextarea.style.width = (evt.clientX - bounds.left) + "px";
verticalTextarea.style.height = (evt.clientY - bounds.top) + "px";

Be warned: getBoundingClientRect is an expensive calculation, and may negatively affect performance.

Update: Added Forked JSFiddle https://jsfiddle.net/csoh7xzv/

Upvotes: 3

Related Questions