[Solved] user to change size of div using the row-resize cursor – like codepen.io [closed]

by


There are a million and one ways to do this, and I suggest you just use an existing framework like Dojo or something…

But if you absolutely must have custom code, the general gist of it is create a container with relative positioning, then create embedded containers that are absolutely positioned according to the parent container. (forgive the inline styles for example)

<div class="SplitContainer" style="position:relative">
    <div class="ContentPane" style="position:absolute">
        Some Text
    </div>
    <div class="Divider" style="position:absolute"></div>
    <div class="ContentPane" style="position:absolute">
       Other Text
    </div>
</div>

Use mouse events (mousedown, mouseup, mousemove) to detect when the user has clicked on the divider. You can use information from these events to determine the mouse position (evt.pageX, evt.pageY).

Then do lots of maths to determine the left, right, top, bottom of the absolutely positioned containers.

Simple Demo:
https://jsfiddle.net/ox6m29f1/

solved user to change size of div using the row-resize cursor – like codepen.io [closed]