title: Resize div right to left
body: <p>I want to resize div from right to left. Many examples I have seen working from left to right, but I want to resize on drag from right to left. </p>
  
  <p>I have a div which is on extreme right corner of window and it has ancore on bottom left. </p>
  
  <p>Formula while dragging left to right works, what will be for left to right.</p>
  
  <p>I have one <a href="http://jsbin.com/warosidiyo/edit?html,css,js,output" rel="nofollow noreferrer">JSBIN</a> demo also </p>
  
  <pre><code>node.style.width = (startWidth + e.clientX - startX) + 'px';
  node.style.height = (startHeight + e.clientY - startY) + 'px'; 
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var node = document.getElementById("sumeet");
  var resizer = document.createElement('div');
  
  node.className = node.className + ' resizable';
  node.style.position = 'absolute';
  
  resizer.className = 'resizer';
  resizer.style.cursor = 'se-resize';
  resizer.style.bottom = '0';
  resizer.style.left = '0';
  resizer.style.position = 'absolute';
  resizer.style.width = '16px';
  resizer.style.height = '16px';
  resizer.style.background = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAA"
   + "QCAMAAAAoLQ9TAAAAUVBMVEUAAACqqqr+/v4vLy/6+vr+/v7+/v4AAABzc3Nvb2" +
   "////+2trbJycnr6+vPz891dXVzc3OhoaF3d3eioqJ9fX2goKC+vr5/f3/Ly8t8fHz+/" +
    "v4NyOEeAAAAG3RSTlMAjgtAaEpbR3wQA3dyanYndRN+L4g2mjByeR/" +
    "NwbV+AAAARklEQVR4XmMgDTAzokqwM7KgybMxockzoctziqLJc/" +
    "ChynNws6LK87ByEZLnF4DLCwoB5YVFeMECYkB5cQmgfkleKQYiAADT4wJh2XodKgAAAABJRU5ErkJggg==')"
  node.appendChild(resizer);
  
  var startX, startY, startWidth, startHeight;
  var doDrag = function(e) {
    node.style.width = (startWidth + e.clientX - startX) + 'px';
    node.style.height = (startHeight + e.clientY - startY) + 'px';
  }
  
  var stopDrag = function(e) {
    console.log("stop drag")
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
  }
  
  var startDrag = function(e) {
     startX = e.clientX; // horixontal cordinate
     startY = e.clientY; // vertical cordinate
     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);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div{ 
    height: 200px;
    width: 300px;
    background-color:pink;
    border:1px solid blue;
  }
  
  #sumeet{
    position:absolute;
    right:0px;
    top:0px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div id="sumeet"&gt;Hello Developer, I can be resized.&lt;/div&gt;
    
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>