Jquery auto resize column

Jquery auto resize column

by Simplybj

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<div id="resizable">
  This is the resizable content...
</div>

<div class="myframe">
  This must resize in reverse direction...
</div>

CSS

#resizable, .myframe {
    border:1px solid black; 
    padding:10px; 
    margin-bottom:20px; 
    width:50%;
    height: 150px
}

JavaScript

$.ui.plugin.add("resizable", "alsoResizeReverse", {
      start: function(event, ui) {
        var self = $(this).data("resizable"),
          o = self.options;
        var _store = function(exp) {
          $(exp).each(function() {
            $(this).data("resizable-alsoresize-reverse", {
              width: parseInt($(this).width(), 10),
              height: parseInt($(this).height(), 10),
              left: parseInt($(this).css('left'), 10),
              top: parseInt($(this).css('top'), 10)
            });
          });
        };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
          if (o.alsoResizeReverse.length) {
            o.alsoResize = o.alsoResizeReverse[0];
            _store(o.alsoResizeReverse);
          } else {
            $.each(o.alsoResizeReverse, function(exp, c) {
              _store(exp);
            });
          }
        } else {
          _store(o.alsoResizeReverse);
        }
      },

      resize: function(event, ui) {
        var self = $(this).data("resizable"),
          o = self.options,
          os = self.originalSize,
          op = self.originalPosition;

        var delta = {
            height: (self.size.height - os.height) || 0,
            width: (self.size.width - os.width) || 0,
            top: (self.position.top - op.top) || 0,
            left: (self.position.left - op.left) || 0
          },

          _alsoResizeReverse = function(exp, c) {
            $(exp).each(function() {
              var el = $(this),
                start = $(this).data("resizable-alsoresize-reverse"),
                style = {},
                css = c && c.length ? c : ['width', 'height', 'top', 'left'];

              $.each(css || ['width', 'height', 'top', 'left'], function(i, prop) {
                var sum = (start[prop] || 0) - (delta[prop] || 0);
                if (sum && sum >= 0)
                  style[prop] = sum || null;
              });

              //Opera fixing...