JQuery resizable () object not retracting

Question

I do not understand why this does not work. I have a div with iframe inside. I applied jQuery resizable () to the div and set the "alsoResize" parameter to my iframe. Here's how it is implemented:

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

Basically, I tried to implement resizable () directly in an iframe, but that didn't work, so I tried this method.

The problem is this:

If I stretch the div, it works (changes), but it doesn’t want to clean (if I drag backwards). Instead, it just gets out of control (in Chrome), and it starts to jump up and down at every move of the mouse (very annoying that I have to add).

Is there anything I don't see? Has anyone else experienced this issue?

Answer 1

The mouse event inside the iframe element will not fire, so the JQuery user interface did not respond when dragging.

To prevent the iframe from capturing the mouse event, you can add mask divs when running drag.

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 .