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; }

I think I can help you, but could you make a working jsfiddle so I can try it out? — myfunkyside
– myfunkyside, Commented Nov 12, 2014 at 6:09
@myfunkyside unfortunately not, I just tried but there is too much dynamically created content on the page, to replicate in a jsfiddle (it's a shopping cart checkout) — user3267755
– user3267755, Commented Nov 12, 2014 at 13:48

myfunkyside · Accepted Answer · 2014-11-12 16:27:10Z

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.

So I replaced your code with mine, but it's still happening. You were right about the cause of the issue though, if I drag really slowly then it works as it should.
@user3267755 - Could you put console.logs inside the event-handlers, like in this fiddle: jsfiddle.net/8tgn8ore/1, and check if both event-handlers are being executed as expected? (Also check if the resizing-class is really added and removed on mousedown and mouseup even if the dialog gets stuck on resizing.) If that is the case, then all we have to focus on is finding something to replace this: $(div).trigger('resizestop');
@user3267755 - You could try replacing $(div).trigger('resizestop'); with $(div).trigger('click');, since you say you have to click again to stop the resizing (although if have to really click on the edge than this will probably not work, but it doesn't hurt to try)
Hi, sorry for the delay and thanks for checking back. Fortunately the client agreed to resizing not being a big deal so we will just disable it. I think this is a great case of having a dialog doing too many thing, and making it into a swiss army knife. There's just so much content & code being used in this iFrame, that it just doesn't resize fast enough to keep up with the mouse. Going to accept your answer because even though the code didn't work, you were still correct with the cause of the problem, which is farther than I got.

Collectives™ on Stack Overflow

jQuery dialog resizing issue

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related