Not able to resize Vertical Ruler again once resize stops

Question

I am using JQuery Resizable widget on the vertical Ruler as shown in the link below. Once, I start resize using the east handle and stop it. Now, I try to resize the ruler again and I find the resize handle not showing up. I checked the html div but the ui-resizable div is deleted. Any sort of help would be useful.

My JS Code:

createRuler();

$('.ruler').resizable({
  handles: "e",
  resize: function(event, ui) {
    $('.ruler').empty();
    createRuler();
  },
  stop: function(event, ui) {},
  start: function(event, ui) {}
});

Check here for complete code

score 1 · Accepted Answer · answered Apr 13 '16 at 15:48

This line breaks it:

 $('.ruler').empty();

I think what is happening, is that you are dumping the data (or reference - not sure exactly what the empty() method does in your application) each time you click. This is fine when you first instantiate it - but the next time you click it - you are running the same function again - this time with no data for the resize.

Try setting up some logic that trigger $('.ruler').empty(); ONLY on the first click of the ruler handle.

This sounds like a good one. Thanks. I found out using the debugging tool of Firefox. — TheGaME, Apr 13 '16 at 15:51

score 1 · Answer 2 · answered Apr 13 '16 at 16:01

My Html code:

<div class="container">
 <div class='ruler'></div>
</div>

I changed the logic in my JS code. Instead of resizing the inner-div(ruler) I applied resizing on outer-div(container) which worked perfectly.

Updated JS code:

createRuler();

$('.container').resizable({
  handles: "e",
  alsoResize: ".ruler",
  resize: function(event, ui) {
    $('.ruler').empty();
    createRuler();
  },
  stop: function(event, ui) {},
  start: function(event, ui) {}
});

Not able to resize Vertical Ruler again once resize stops

2 Answers2