jQuery dialog resizing issue

Question

I have a jQuery dialog that sometimes won't stop resizing when you release the mouse. If it does this, you have to click again on the edge of the div to stop the resize or it will follow your mouse around the screen. I have looked up on stackoverflow this solution to bind an event handler to the resizestop event and added it to my dialog code, but this isn't even firing until you click again, in the case that it doesn't stop resizing on mouseup.

$("div").bind("resizestop", function(event, ui) {
    alert('stopped resizing');
});

Dialog code:

function showDialog(div, src) {
    $(div).html('<IFRAME id="orderframe" name="orderframe" frameBorder=0 width="100%" height="100%" style="overflow-x: hidden; overflow-y: scroll;" src="' + src + '"></IFRAME>');
    $(div).dialog({
        modal: true,
        height: 750,
        width: 1050,
        minWidth: 561,
        position: ['top', 20],
        resizable: true,
        start: function (event, ui) {
            activatePortlet(jQuery(this).attr("id"));
            var o = $(this).data('draggable').options;
            jQuery("iframe").each(function () {
                jQuery('<div class="ui-resizable-iframeFix" style="background: #fff;"></div>')
     .css({
         width: this.offsetWidth + "px", height: this.offsetHeight + "px",
         position: "absolute", opacity: "0.001", zIndex: 1000
     })
     .css(jQuery(this).offset())
     .appendTo("body");
            });
        },
        stop: function (event, ui) {
            jQuery("div.ui-resizable-iframeFix").each(function () { this.parentNode.removeChild(this); }); //Remove frame helpers
        }
    });

    $("div").bind("resizestop", function (event, ui) {
        alert('stopped resizing');
    });

    return false;

}

Answer 1

What I think is causing your issue, is that the cursor needs to be actually on the dialog when the mouse-button is released.

To the human eye it may seem as though this is the case, but if you move the mouse very fast, you can see the lag of the dialog resizing following the cursor.
Usually the dialog catches up in time before the mouse-button is released again, but if you move a little fast and you release the button while you are still resizing, the cursor is not on the dialog at the moment of release, and thus the event to stop resizing isn't triggered (because that is attached to the dialog).

To fix this, replace you resizestop-function by these two functions:

$(div).on('mousedown',function(){
    $(this).addClass('resizing');
});
$(document).on('mouseup',function(){
    if ($(div).hasClass('resizing')) {
        $(div).removeClass('resizing');
        $(div).trigger('resizestop');
    }
});

• This captures the mousedown event on the div (the supplied var div), but
  it captures the mouseup event globally. So even when your mouse isn't on the dialog when you release the button, the event still fires. (Because of the use of the global event, you need the class to check if the mouseup originates from a mousedown on the div.)
  You can try if it also works with $(div).on('resizestart',function(){...}. I couldn't test that.

• I hope the $(div).trigger('resizestop'); works, this I could also not test, and I can't seem to find reliable documentation on that event, when it fires and on what elements. But since you stated that it does fire when you click again, I think you should also be able to use it with .trigger().
  (If that doesn't work, let me know and I'll try to find another solution for that last step).

---

Here is a code snippet:

$('#dialogID').on('mousedown',function(){
  $(this).addClass('resizing');
  $(this).html($(this).attr('class')); //FOR TESTING ONLY
});
$(document).on('mouseup',function(){
  if ($('#dialogID').hasClass('resizing')) {
    $('#dialogID').removeClass('resizing');
    //$('#dialogID').trigger('resizestop');
    $('#dialogID').html($('#dialogID').attr('class')); //FOR TESTING ONLY
  }
});

#dialogID {width:100px; height:100px; background:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="" id="dialogID" contenteditable="true"></div>

(fiddle: http://jsfiddle.net/8tgn8ore/2/)

• This code snippet doesn't proof it works with your code, because, as you said, it was too difficult to turn your code into a working example.
• It really only adds and removes the class, but it does proof that the use of a global mouseup works, which I think is the key to the solution to your problem.