title: How to let resize vertically a DIV with only jQuery - no plugins?
body: <p><strong>Edit:</strong> I put this snippet of code in jsbin: <a href="http://jsbin.com/eneru" rel="noreferrer">http://jsbin.com/eneru</a></p>
  
  <hr>
  
  <p>I am trying to let the user resize (only vertically) a DIV element with jQuery. I read about jQuery UI, I tried it, and in some minutes, I had it working. But the library is adding a ~25KB overhead that I would like to avoid, since I only want simple vertical resizing.</p>
  
  <p>So I tried to do it on my own. Here it is the HTML, I am using inline styling for clarity:</p>
  
  <pre><code>&lt;div id="frame" style="border: 1px solid green; height: 350px"&gt;
      &lt;div style="height: 100%"&gt;Lorem ipsum blah blah&lt;/div&gt;
      &lt;span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, there is a little bar under the DIV element, so the user can drag it up or down to resize the DIV. Here it is the Javascript code (using jQuery):</p>
  
  <pre><code>$(document).ready(function(){
      var resizing = false;
      var frame = $("#frame");
      var origHeightFrame = frame.height();
      var origPosYGrip = $("#frame-grip").offset().top;
      var gripHeight = $("#frame-grip").height();
  
  
      $("#frame-grip").mouseup(function(e) {
          resizing = false;
      });
  
      $("#frame-grip").mousedown(function(e) {
          resizing = true;
      });
  
      $("#frame-grip").mousemove(function(e) {
          if(resizing) {
              frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
          }
      });
  });
  </code></pre>
  
  <p>It works, more or less, but if you drag the bar too fast, it stops following the mouse movement and everything breaks.</p>
  
  <p>It is the first time I try to do something <em>serious</em> (ahem) with JS and jQuery, so I may be doing something dumb. If so, please do tell me :)</p>