Resizable div with iframe

Question

I got a resizable div and another div next to it with an iframe in it. The resizable div won't resize properly when the mouse is over the iframe. Any ideas for a fix?

Example: http://jsfiddle.net/36S7p/1/

$("#cont").resizable({
    handles: "e"
});

Answer 1

A somewhat hacky approach, if you still need it: http://jsfiddle.net/36S7p/4/

I added a border and some margins around the mouse whenever the frame is being resized, this way it protects the mouse from the iFrame, if that makes sense.

Basically, add this to jQuery:

  helper: "ui-resizable-helper"

and add this bit of CSS:

.ui-resizable-helper{
    border: 75px solid rgba(239, 239, 239, .9);
    margin: -75px;    
}