Call resize event in jQuery UI

Question

I have a DIV to which I've applied:

$(mydiv).resizable({handles: "w", maxWidth: 300, minWidth: 10});

Now, I'd like, sometimes, to make it either 300 px wide or 10 px wide programatically. I've tried many combinations, but none work. Some of the more convoluted attempts look like:

var my_event = new jQuery.Event("resize");
my_event.offsetX = my_event.clientX = my_event.pageX = $(window).width() - 300;
$(mydiv).trigger(my_event);

The DIV is on the right edge of the page, so me mouse would be 300 px from the right edge.

This is very obviously the wrong way to go. What's the right way?

Thanks.

Answer 1

Would this (updated example) work? ( demo )

<div id="WindowA" class='Window'>I'm re-sizeale</div>
<div id="WindowB" class='Window'>I'm not re-sizeale</div>
<button id="Resize">Reset Size</button>
<script>
  var windowA = $('#WindowA'),
      windowB = $('#WindowB');

  windowA.bind({
    resize : function(event,ui) {
      windowB.css({
        "width": windowA.width() + "px",
        "height": windowA.height() + "px"
      });
    }
  }).resizable();

  $('#Resize').on('click', function () {
    windowA.css({
      "width": "150px",
      "height": "150px"
    }).trigger('resize');
  });
</script>
<style>
  .Window {
    width: 150px;
    height: 150px;
  }
  #WindowA {
    background-image: url(http://placekitten.com/200/300);
  }
  #WindowB {
    background-image: url(http://placekitten.com/g/200/300);
  }
</style>