jQuery resizable() object does not retract

Question

I don't understand why this doesn't work. I have a div with an iframe inside. I applied jQuery resizable() to the div and set the "alsoResize" option to my iframe. This is how it's implemented:

$("#my-frame-wrapper").resizable({
    alsoResize : '#myframe'
});

Basically, I was trying to implement resizable() directly to the iframe, but it wouldn't work, so I tried this method.

The problem is:

If I stretch the div, it works (resizes), but it doesn't want to retract (if I drag back). Instead, it just goes completely out of control (in Chrome) and it starts bouncing up and down on every mouse-move (very annoying I must add).

Is there anything I am missing? Has anyone else experienced this problem?

Answer 1

Mouse event inside the iframe element won't get out, so JQuery UI didn't react when you drag back.

In order to prevent iframe from capturing mouse event, you can add a mask div when drag is start.

html:

<div id="my-frame-wrapper">
    <iframe id="my-frame" src="http://jsfiddle.net/"></iframe>
    <div id="mask"></div>
</div>

css:

#my-frame-wrapper {
    width:200px;
    height:100px;
    position:relative;
}
#my-frame {
    width:100%;
    height:100%;
}
#mask {
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    display:none;
}

js:

$(function(){
    $("#my-frame-wrapper").resizable({
        start: function(event, ui) {
           $("#mask").css("display","block");
        },
        stop: function(event, ui) {
           $("#mask").css("display","none");
        }
    });
});

See jsfiddle.