Jquery Ui Resizable Returning The Size

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 va

Solution 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

Solution 2:

Things may have been different at the time of these answers, but now jQuery UI makes it very easy to get information on your events and ui elements. I highly recommend console logging the ui variable, as ther eis a LOT of information available from it. However to answer your question a little bit better:

$('.selector').resizable({
    stop: function (evt, ui) {
        console.log(ui.size);
    }
});

should yield an object with properties height and width. These are your new heights and widths of your resizable items

In case you wanted to calculate the delta of either of these values, you could reference ui.originalSize and either the height or width properties there as well.

Hope this works out a little more concisely than the other answers

Solution 3:

example div:

<div id="div">
    <p>this is the div i want to retrieve demensions</p>

    <p>second paragraph</p>
</div>

retrieve the dimensions with this javascript

var width = $("#div").css("width"),
    height =$("#div").css("height");

alert (width + ", " + height);

to write the dimensions back to the database will you will need to POST the values back as either part of a form or via an AJAX request