Developing Resizable DIV Using JavaScript

Sandeep Kumar Patel

Published in

Tutorial Savvy

2 min readApr 22, 2016

You might have seen the TEXTAREA element in HTML is re-sizable. We can drag in the bottom right corner of the text area to re-size it.

In this demo,”We will learn to develop a re-sizable DIV element, similar to TEXTAREA re-sizer”.

We will creating a JavaScript widget which will take the HTML element and make it re-sizable. The following code show the use of Javascript widget.

var ResizableNode1 = new ResizableNode({
     content: '#sandeep1'
});

In the above code the plugin name is ResizableNode and it takes an argument named content which it nothing but a DOM selector.
The plugin definition for ResizableNode is as follows:-

(function() {

    this.ResizableNode = function() {
        var startX, startY, startWidth, startHeight;
        if (arguments[0] && typeof arguments[0] === "object") {
            this.options = arguments[0]
        }
        console.log("this.options",this.options)
        var resizer = document.createElement('div'),
            node = document.querySelector(this.options.content);
        node.className = node.className + ' resizable';
        node.style.border = '1px dotted #f0f0f0';
        node.style.position = 'relative';
        node.style.overflow = 'hiddenz3`';
        //background: blue;
        resizer.className = 'resizer';
        resizer.style.cursor = 'se-resize';
        resizer.style.bottom = '0';
        resizer.style.right = '0';
        resizer.style.position = 'absolute';
        resizer.style.width = '16px';
        resizer.style.height = '16px';
        resizer.style.background ="url(//to resize image)",
        node.appendChild(resizer);var doDrag = function(e) {
  node.style.width = (startWidth + e.clientX - startX) + 'px';
  node.style.height = (startHeight + e.clientY - startY) + 'px';
}
var stopDrag = function(e) {
  document.documentElement.removeEventListener(
   'mousemove', doDrag, false
   );
   document.documentElement.removeEventListener(
   'mouseup', stopDrag, false
    );
 }
var startDrag = function(e) {
    startX = e.clientX;
    startY = e.clientY;
 startWidth=  parseInt(
    document.defaultView.getComputedStyle(node).width, 
 10);
 startHeight = parseInt(
    document.defaultView.getComputedStyle(node).height, 
 10);
  document.documentElement.addEventListener(
  'mousemove', doDrag, false
  );
  document.documentElement.addEventListener(
   mouseup', stopDrag, false
  );
}
resizer.addEventListener('mousedown', startDrag, false);
}
}());

The index.html file contains the HTML markup for this demo.The content of index.html is as follows:-

<html>
    <head>
        <title>Resizable Element Example Using JavaScript</title>
        <style>
            div{  height: 200px; width: 300px;  margin:10px; background: lightgoldenrodyellow}
            div#sandeep1{width:600px;}
        </style>
    </head>
    <body>
    <h2>ResizableNode Example 1:</h2>
        <div id="sandeep1">Hello Developer, I can be resized.</div>
    <h2>ResizableNode Example 2:</h2>
        <div id="sandeep2">Hello , I can be resized.</div>
    </body>
    <script src="script.js"></script>
    <script>
        var ResizableNode1 = new ResizableNode({
            content: '#sandeep1'
        });
        var ResizableNode2= new ResizableNode({
            content: '#sandeep2'
        });
    </script>
</html>

The output of this demo looks like following screenshot:-

The gh-page for this demo is available in following link:-http://saan1984.github.io/ResizeElementDemo/
The demo code can be downloaded from the following link:-https://github.com/saan1984/ResizeElementDemo

Written by Sandeep Kumar Patel