Is there any way I can simplify this re-sizable solution? It seems too difficult and messy to me.
$.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 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");
}
});
$(function () {
$("#resizable").resizable({
alsoResizeReverse: ".myframe"
});
});
#resizable, .myframe {
border:1px solid black;
padding:10px;
margin-bottom:20px;
width:50%;
height: 150px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<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/1.4.2/jquery.min.js"></script>
<div id="resizable">This is the resizable content...</div>
<div class="myframe">This must resize in reverse direction...</div>