jquery ui resizable returning the size

Question

Hay im new to jquery and i'm trying to use resizable. I can get it to work fine but cant seem to work out how to return the new size. I would like to set the new size's to a php variables to be save in a DB. I am new to javascript and jquery so any help would be a big help.

Answer 1

The resizable plugin itself does not provide a method to get the sizes. I assume they did not implement this because it would just be redundancy methods on the same node, as there are already methods in jQuery core for doing this.

jQuery provides several ways to find width and height depending on what you want to do. The plain width/height methods get the css values. A lot of times it can be more useful to use the outerWidth and outerHeight methods, however, because they return the total calculated size of the element on the page, including all margins, borders, etc.

Examples:

//Width/Height of just the element (as from css)
var w = $('.selector').width()
var h = $('.selector').height()

//Width/Height of total space the element takes up with formatting (includes border and margin)
var w = $('.selector').outerWidth()
var h = $('.selector').outerHeight()

//Width/Height of the space the content of the element takes up
var w = $('.selector').innerWidth()
var h = $('.selector').innerHeight()

Edit Applying the methods to resizable events

The resizable plugin offers several events to bind to: create,start,resize, and stop. We can bind a function to get called on any of these events at initialization or any time later. As it sounds, the start event fires when you start to resize the element, stop fires when you stop resizing the element, and resize gets called everytime the size of the element changes during resizing (every pixel).

Binding at initialization:

$('.selector').resizable({
    //Other options
    create : function(event,ui) {...},
    start : function(event,ui) {...},
    stop : function(event,ui) {...},
    resize : function(event,ui) {...}
});

Or binding at any point later

$('.selector').bind('resizecreate',function(event,ui) {...});
$('.selector').bind('resizestart',function(event,ui) {...});
$('.selector').bind('resizestop',function(event,ui) {...});
$('.selector').bind('resize',function(event,ui) {...});

Now, for your case, I would suggest 1 of 2 options, either binding the start and stop commands to get your original and modified sizes, or binding to resize to work with the value in real time.

Example for start/stop pattern

var startW = 0;
var startH = 0;

$('.selector').resizable({
    //Other options
    start : function(event,ui) {
        startW = $(this).outerWidth();
        startH = $(this).outerHeight();
    },
    stop : function(event,ui) {
        endW = $(this).outerWidth();
        endH = $(this).outerHeight();
        alert("width changed:"+ (endW-startW) + " -- Height changed:" + (endH-endW));
    }
});

Example for printing value on the move to console

$('.selector').resizable({
    //other options
    resize: function(event,ui) {
        console.log([$(this).outerWidth(),$(this).outerHeight()]);
    }
});

Hope this helps