jQuery resizable plugin

Question

Is there any way I can simplify this re-sizable solution? It seems too difficult and messy to me.

Working example

$.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>

Answer 1

Your code is good, but there's a few things you can improve on:

            $(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)
            });

You can use an unary instead of parseInt:

            $(this).data("resizable-alsoresize-reverse", {
                width: +$(this).width(),
                height: +$(this).height(),
                left: +$(this).css('left'),
                top: +$(this).css('top')
            });

---

This doesn't really look like you're storing anything.

var _store = function (exp)

It looks more like you're setting up css rules and what is exp?

You should be more descriptive with your function and variable names.

---

I would avoid omitting the var keyword as it makes the code harder to maintain in future.

    var self = $(this).data("resizable"),
        o = self.options,
        os = self.originalSize,
        op = self.originalPosition;

Imagine you're a contractor coming in to improve this plugin and you accidentally remove the , after self's assignment. All of a sudden you've got a bunch of troublesome globals.

Sticking to adding the var keyword on every line is a practise best kept early.

---

Your choice of variable assignment is strange:

Here, you assign os and op,

    var self = $(this).data("resizable"),
        o = self.options,
        os = self.originalSize,
        op = self.originalPosition;

But in the following block, you don't bother assigning self.size.* variables.

    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
    },

Don't assign variables you don't need to.

---

Making o a shorthand accessor for your options variable is unclear, o can represent many other things. Try to be a little more clear with your variable assignment, and additionally try to avoid abbreviations.

---

event and ui are passed in as parameters into your three parent functions of start, resize and stop, yet they're never actually used. Remove unnecessary parameters.

---

You have a lot of extraneous lines, I would try to avoid that, really only leaving lines when necessary.

---

In your data strings, you have the following resizable-alsoresize-reverse, you should be adding a space (-) between also and resize.