jQuery UI Resizable alsoResize reverse

Question

How to make the jQuery UI Resizable alsoResize reverse direction.

suppose in the html there is two div tag is there, if i resize in upward means the other thing has to resize downward

<script>
        $(function() {
        $("#resizable").resizable({alsoResize: ".myiframe"});

    });
</script>
<div id = "resizable">
        This is the resizable content...
</div>

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

i tried it but of no use please guide to solve this

Simen Echholt · Accepted Answer · 2015-12-08T10:04:06.290

By modifying the code jQuery uses to implement the alsoResize option, we can make our own alsoResizeReverse option. Then we can simply use this as follows:

$("#resizable").resizable({
    alsoResizeReverse: ".myframe"
});

The structure of the original alsoResize option has been changed over the various versions of jQuery UI and my original code does not work in the newer versions. I'll give the code for adding this functionality in version 1.8.1 and 1.11.4.

Only a few things had to be changed, such as the obvious renaming alsoResize to alsoResizeReverse and subtracting the delta instead of adding it (what makes the resize reversed). The original alsoResize code starts on line 2200 of version 1.8.1 of jQuery UI and line 7922 of version 1.11.4. You can see the few changes needed here.

To add the alsoResizeReverse functionality, add this to your javascript (This should be put outside of document.ready()):

For newer versions of jQuery UI (example is based on v1.11.4):

$.ui.plugin.add("resizable", "alsoResizeReverse", {

    start: function() {
        var that = $(this).resizable( "instance" ),
            o = that.options;

        $(o.alsoResizeReverse).each(function() {
            var el = $(this);
            el.data("ui-resizable-alsoresizeReverse", {
                width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
                left: parseInt(el.css("left"), 10), top: parseInt(el.css("top"), 10)
            });
        });
    },

    resize: function(event, ui) {
        var that = $(this).resizable( "instance" ),
            o = that.options,
            os = that.originalSize,
            op = that.originalPosition,
            delta = {
                height: (that.size.height - os.height) || 0,
                width: (that.size.width - os.width) || 0,
                top: (that.position.top - op.top) || 0,
                left: (that.position.left - op.left) || 0
            };

        $(o.alsoResizeReverse).each(function() {
            var el = $(this), start = $(this).data("ui-resizable-alsoresize-reverse"), style = {},
                css = el.parents(ui.originalElement[0]).length ?
                    [ "width", "height" ] :
                    [ "width", "height", "top", "left" ];

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

            el.css(style);
        });
    },

    stop: function() {
        $(this).removeData("resizable-alsoresize-reverse");
    }
});

For older version (based on v1.8.1 -- my original answer):

$.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); // subtracting instead of adding
                    if (sum && sum >= 0)
                        style[prop] = sum || null;
                });

                //Opera fixing relative position
                if (/relative/.test(el.css('position')) && $.browser.opera) {
                    self._revertToRelativePosition = true;
                    el.css({ position: 'absolute', top: 'auto', left: 'auto' });
                }

                el.css(style);
            });
        };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) {
            $.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); });
        }else{
            _alsoResizeReverse(o.alsoResizeReverse);
        }
    },

    stop: function(event, ui){
        var self = $(this).data("resizable");

        //Opera fixing relative position
        if (self._revertToRelativePosition && $.browser.opera) {
            self._revertToRelativePosition = false;
            el.css({ position: 'relative' });
        }

        $(this).removeData("resizable-alsoresize-reverse");
    }
});

Here's a demo: http://jsfiddle.net/WpgzZ/

Just thought I'd add that you ADD this to your jquery-us.js, so that both alsoResize, and alsoResizeReverse works. (Just in case anyone was confused) Also, great job! — Richard, Feb 21 '12 at 15:28
works very well! we were looking for split pane kind of a component. used this code to build one. thanks! — singhspk, Mar 30 '12 at 16:37
This behaves unexpectedly if your .resizable elements have `position:absolute` and `left:##px` set. — professormeowingtons, Apr 30 '13 at 05:09
Sorry to say but this does not work on most recent versions of JQuery UI — Mustafa, Dec 06 '13 at 12:35
Good Job! Unfortunately it changes the aspect ratio of the other element. I'm using it for a video and when the resizing function stops the video control bar is way longer than the video itself. Is there a way to pass the "aspectRatio" option to the other elements resize function? — user2718671, Jul 31 '14 at 08:34
thanks, how to set minWidth for element of reverse resizable? — Muhammad Zeshan Ghafoor, Apr 05 '19 at 13:26

score 8 · Answer 2 · answered Apr 18 '13 at 11:52

8

I had a problem getting the "Simen Echholt"-code to work with jQuery 1.9.1/jquery-ui (1.10.2), but it worked when I exchanged "$(this).data("resizable")" with "$(this).data("ui-resizable")".

answered Apr 18 '13 at 11:52

robertpaulsen

209
4
9

I thought I might mention that I also had to change `$.browser.opera` to `$.support.opera` when using jQuery 2.0.3/jQuery UI 1.10.3. – JeffJenk Oct 08 '13 at 07:43

score 5 · Answer 3 · answered Nov 27 '14 at 16:16

Update to jQuery 2.1.1 and jQuery UI 1.11.2.

$.ui.plugin.add("resizable", "alsoResizeReverse", {

  start: function() {
    var that = $(this).resizable("instance"),
      o = that.options,
      _store = function(exp) {
        $(exp).each(function() {
          var el = $(this);
          el.data("ui-resizable-alsoResizeReverse", {
            width: parseInt(el.width(), 10),
            height: parseInt(el.height(), 10),
            left: parseInt(el.css("left"), 10),
            top: parseInt(el.css("top"), 10)
          });
        });
      };

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

  resize: function(event, ui) {
    var that = $(this).resizable("instance"),
      o = that.options,
      os = that.originalSize,
      op = that.originalPosition,
      delta = {
        height: (that.size.height - os.height) || 0,
        width: (that.size.width - os.width) || 0,
        top: (that.position.top - op.top) || 0,
        left: (that.position.left - op.left) || 0
      },

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

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

          el.css(style);
        });
      };

    if (typeof(o.alsoResizeReverse) === "object" && !o.alsoResizeReverse.nodeType) {
      $.each(o.alsoResizeReverse, function(exp, c) {
        _alsoResizeReverse(exp, c);
      });
    } else {
      _alsoResizeReverse(o.alsoResizeReverse);
    }
  },

  stop: function() {
    $(this).removeData("resizable-alsoResizeReverse");
  }
});
$(function() {

  $("#resizable").resizable({
    alsoResizeReverse: ".myframe"
  });

});

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

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="resizable">
  This is the resizable content...
</div>

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

[http://jsfiddle.net/WpgzZ/1136/][1]

score 4 · Answer 4 · answered Apr 20 '12 at 13:58

4

$('#div1').resizable({
        handles: 'n',
        resize: function(){
            $('#div2').css("height","-"+ui.size.height+"px");
        }
    }).bind("resize", function () {
        $(this).css("top", "auto"); //To handle the issue with top
    });

This should also work to resize another div in the opposite direction.

answered Apr 20 '12 at 13:58

josephbaker

41
2

2

Well in my case `ui is not defineded` – Kiwy Dec 30 '13 at 11:12

score 2 · Answer 5 · edited Sep 22 '12 at 00:14

2

Even if the code posted by Simen works very well, here is my code to resize two div vertically (and it works fine)

<script>
    var myheight  = ($(window).height()-50);
    var mywidth  = $(window).width();
    $(window).load(function () {
        $("#resizable").height(100); 
        $("#content").height(myheight-$("#resizable").height()); 
    });
</script>

<div id="resizable" style="border:1px solid #333; overflow:auto">resizable</div> 
<div id="content" style="border:1px solid red; overflow:auto">content</div> 

<script>
    $("#resizable").resizable({ 
        handles: 's', 
        maxHeight: myheight,
        resize: function() {
        $("#content").height(myheight-$("#resizable").height());
        }
    });
</script>

edited Sep 22 '12 at 00:14

Littm

4,923
4
30
38

answered Sep 07 '12 at 12:48

marg t

21
2

1

Hey mate, you should ask your question in another question – Littm Sep 22 '12 at 00:08
Code works fine, but the bottom div have some problem on resize. Needs a small tweak i guess, I couldn't figure it out.I've tried overflow-different styles..! – raja777m Apr 16 '15 at 18:41

score 2 · Answer 6 · answered Mar 27 '17 at 19:03

Adapted the ideas from marg t and Joseph Baker - which I think is a far better approach. This method doesn't require any Jquery library hack or plugin to split a div into two panes. Just add a function to offset width in the resizable 'resize' event:

$("#left_pane").resizable({
  handles: 'e', //'East' draggable edge
  resize: function() {
    $("#right_pane").outerWidth($("#container").innerWidth() - $("#left_pane").outerWidth());
  }
});

Here's the complete JS fiddle.

score 1 · Answer 7 · answered May 07 '14 at 13:20

Updated for jquery-ui 1.10.4

$.ui.plugin.add('resizable', 'alsoResizeReverse', {

  start: function () {
    var that = $(this).data('ui-resizable'),
    o = that.options,
    _store = function (exp) {
      $(exp).each(function() {
        var el = $(this);
        el.data('ui-resizable-alsoresize-reverse', {
          width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
          left: parseInt(el.css('left'), 10), top: parseInt(el.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) { _store(exp); }); }
    }else{
      _store(o.alsoResizeReverse);
    }
  },

  resize: function (event, ui) {
    var that = $(this).data('ui-resizable'),
    o = that.options,
    os = that.originalSize,
    op = that.originalPosition,
    delta = {
      height: (that.size.height - os.height) || 0, width: (that.size.width - os.width) || 0,
      top: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0
    },

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

        $.each(css, function(i, prop) {
          var sum = (start[prop]||0) - (delta[prop]||0); // subtracting instead of adding
          if (sum && sum >= 0) {
            style[prop] = sum || null;
          }
        });

        el.css(style);
      });
    };

    if (typeof(o.alsoResizeReverse) === 'object' && !o.alsoResizeReverse.nodeType) {
      $.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); });
    }else{
      _alsoResizeReverse(o.alsoResizeReverse);
    }
  },

  stop: function(event, ui){
    $(this).removeData("resizable-alsoresize-reverse");
  }
});

jQuery UI Resizable alsoResize reverse

7 Answers7

Linked