I have a div which is resizable and now I want to edit a cookie when this box is resized/when the user finished resizing. (I have the cookie plugin)

How can I do this?

PS: I have multiple .div's with different id's.

<div class="div" id="div1"></div>
<div class="div" id="div2"></div>

My Code which doesn't work (it doesn't save the cookie)

$( ".div" ).resizable({
    handles: \'s\',
    onResize: function(size) {
        $.cookie("div_height", this.height);
    }
});

I have a div which is resizable and now I want to edit a cookie when this box is resized/when the user finished resizing. (I have the cookie plugin)

How can I do this?

PS: I have multiple .div's with different id's.

<div class="div" id="div1"></div>
<div class="div" id="div2"></div>

My Code which doesn't work (it doesn't save the cookie)

$( ".div" ).resizable({
    handles: \'s\',
    onResize: function(size) {
        $.cookie("div_height", this.height);
    }
});

• javascript
• jquery
• jquery-ui
• cookies

• please explain doesnt work. Does it not resize or does it not save the cookie? Please be more specific – Dhiraj Commented Jul 15, 2015 at 13:31
• Read the documentation. The event to be used is stop and not onResize – Alvaro Montoro Commented Jul 15, 2015 at 13:32

2 Answers 2

Use this code

$( ".div" ).resizable({
   handles: \'s\',
   stop: function(e,ui) {
      $.cookie("div_height", ui.size.height);
   }
});

Here is a working js fiddle to capture the resize event, having another example, but it perfectly suitable for you: http://jsfiddle/byrgv6j4/1/

$('.resizable').resizable({
    aspectRatio: true,
    handles: 'ne, se, sw, nw',
    resize: function(e, ui) {
      //console.log(e);  
      //console.log(ui);
      console.log(ui.size.height);
    }
});

You must get the ui.size.height if you want to get the height of the current state of the element.