Question

I am using the resizable() function from jQuery to resize a div which contains an iframe with it’s width and height set to 100% (to fill the space of the div). The problem I am having is that when I resize inwards (shrinking the div) in either direction – if I move the mouse too quickly it loses the grab (making the div fixed) and no longer resizes until I realign my mouse over the corner.

It works fine when expanding the div, I can do that by quickly moving the mouse, but it’s annoying having to carefully move the div to ensure it doesn’t get stuck.

Any ideas?

Many thanks.

EDIT:

I have uploaded the example onto my website:
http://stefandunn.co.uk/concepts/drag&drop/

Simply click on the “Webpage” widget and resize it.

Answer 1

In the past I have the same problem and the solution/hack that I found is this:

$("yourObjectToResize").resizable({
    //containment: 'parent',
    minWidth: 400,
    minHeight: 200,
    start: function () {
        $(".widget_box").each(function (index, element) {
            var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
            $(element).append(d);
        });
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});