title: Resize a div from two ends
body: <p>I am making a div resizer and cannot use any plugin as I need to customize many things on it's basis. I have achieved the task to resize the div from right side. In this I am manipulating the drag and calculating the units accordingly.</p>
  
  <p>This script works fine if I keep the drag limited to right side.
  But now my task is to resize it on both ends. I understand that some technique would be applied.</p>
  
  <p>One technique I am trying to apply is the half the div and notice the distance from that <strong>center point</strong> e.g if the center is <strong>200px</strong> and the mouse is at <strong>10px</strong> then we can start decreasing the div from <em><strong>right</strong></em> and vice-versa.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var handle, measurement, isResizing;
  var pageWidth = $(window).width();
  var maxUnit = 300;
  var minUnit = 50;
  var maxLimit;
  var adjustment = 0;
  var container;
  
  function calculateUnit(maxUnit, maxLimit, currentWidth) {
    var offset = maxLimit - currentWidth;
    return Math.ceil(maxUnit - offset);
  }
  
  function adjustContainer(innerContainerWidth, widthDiff, heightDiff) {
    handle.css({
      'width': (innerContainerWidth - widthDiff) + 'px',
      'left': (widthDiff / 2) + 'px',
      'top': (heightDiff / 2) + 'px'
    });
  }
  
  function InitSizeCalculator() {
    container = $("#topDrag");
    console.log('height c', container.height());
    //console.log('width c', container.width());
    handle = $('#drag'), measurement = document.getElementById('measurement'), isResizing = false;
    var heightDiff = container.height() - 170;
    var widthDiff = container.width() - handle.width();
    console.log('height c', heightDiff);
    //maxLimit = (pageWidth &lt;= 720) ? (pageWidth - 20) : (pageWidth - (pageWidth / 3)) - 60;
    maxLimit = container.width();
    adjustContainer(handle.width(), widthDiff, heightDiff);
    //handle.css('width', maxLimit);
  
    measurement.innerHTML = maxUnit + ' m';
  }
  InitSizeCalculator(); //initialize the variable first 
  handle.on('mousedown touchstart', function(e) {
    isResizing = true;
    lastDownX = e.clientX;
  });
  
  $(document).on('mousemove touchmove', function(e) {
      var currentWidth = e.clientX - adjustment;
      console.log(e.clientX);
      // we don't want to do anything if we aren't resizing.
      var unit = calculateUnit(maxUnit, maxLimit, currentWidth);
      if (!isResizing || unit &lt; minUnit || e.clientX &gt; maxLimit)
        return;
      handle.css('width', currentWidth);
      measurement.innerHTML = unit + ' cm';
    })
    .on('mouseup touchend', function(e) {
      // stop resizing
      isResizing = false;
    });
  //start</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.imgContainer-p {
    position: relative !important;
    border-right: black 1px dashed;
    border-left: black 1px dashed;
    cursor: w-resize;
    height: 220px
  }
  #drag {
    position: absolute;
    /*right: 500px;*/
    top: 0;
    bottom: 0;
    /*width: 500px;*/
  }
  .imgWinder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 200px;*/
    height: 90%;
  }
  .imgPaper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 200px;*/
    height: 90%;
  }
  .measurment-p {
    width: 100%;
    height: 20px;
    border-bottom: 1px dashed black;
    border-left: 1px dashed black;
    border-right: 0px dashed black;
    padding-top: 10px;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-md-9 col-sm-12" id="topDrag"&gt;
    &lt;div class="imgContainer-p" id="drag"&gt;
      &lt;img id="imgWinder" class="imgWinder" draggable="false" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Cylinder_geometry_rotated.svg/2000px-Cylinder_geometry_rotated.svg.png" /&gt;
  
  
      &lt;div style="width: 100%; height: 20px; border-bottom: 1px dashed black; border-left: 1px dashed black; border-right: 0px dashed black; padding-top: 10px; text-align: center"&gt;
        &lt;span style="background-color: #FFFFFF; padding: 0 10px;"&gt;
                                      &lt;span class="label label-default"&gt;Size&lt;/span&gt;
        &lt;span class="label label-warning" id="measurement"&gt;01&lt;/span&gt;
  
        &lt;!--Padding is optional--&gt;
        &lt;/span&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>