CODEWITHSUNDEEP
jqueryuser-interfaceresizedrag
Farkas Imre
Farkas Imre

Reputation: 123

Divs resize with jQuery

I have the following structure http://img109.imageshack.us/img109/589/layoutwireframe.png

I need the resize to work on % on sidebar - ex if i resize the SidebarTop section , the SidebarBottom part need to update too - increasing top part will decrease bottom - and inverse .

I find solution to do resize same blocks but this increase both. What i need is if one increase other decrease.

Thanks!

Upvotes: 3

Views: 776

Answers (2)

Dave Miles
Dave Miles

Reputation: 386

Define a small DIV which you can make resizable and draggable.

<div id="resizeDiv"></div>

Now just add following jQuery code in your document.

$('#resizeDiv')
    .draggable();
    .resizable();

The beauty of jQuery is that we can simply chain the function calling. First we called .draggable() function that makes the DIV draggable and then we called resizable(). You may want to define callback functions on start/stop/resize events. To do so we simply define:

$('#resizeDiv')
    .resizable({
        start: function(e, ui) {
            alert('resizing started');
        },
        resize: function(e, ui) {

        },
        stop: function(e, ui) {
            alert('resizing stopped');
        }
    });

Note that the callback function gets two arguments. First is event object and next is ui. The ui object has the following fields:

  • ui.helper – a jQuery object containing the helper element

  • ui.originalPosition – {top, left} before resizing started

  • ui.originalSize – {width, height} before resizing started

  • ui.position – {top, left} current position

  • ui.size – {width, height} current size

Upvotes: 2

fibertech
fibertech

Reputation: 357

You can create a Reverse resize by modifying the code jQuery uses to implement the alsoResize option, we can make our own alsoResizeReverse option. Then we can simply uses this as follows:

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

And the code for adding the alsoResizeReverse option: 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 in this version of jQuery UI (1.8.1 from the Google CDN).

The code (this should be put outside of document.ready()):

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

Upvotes: 3

Related Questions