Jquery UI resizable - resize a div placed over an iframe

Question

If you check out this jsbin: http://jsbin.com/efosed/5/edit and you press \"Run with JS\", there will be a div that can be resized with jquery ui. Everything works like expected

Answer 1

CSS only method

.ui-resizable-resizing iframe { pointer-events: none; }

The ui-resizable-resizing class is added whenever you are resizing something.

Answer 2

You have to implement your own logic to fix iframe. One solution is to add a div over your iframe:

DEMO

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $('<div class="ui-resizable-iframeFix" style="background: #fff;"></div>')
            .css({
                width:'100%', height: '100%',
                position: "absolute", opacity: "0.001", zIndex: 1000
           })
            .appendTo("body");
      },
    stop: function(event, ui) {
        $('.ui-resizable-iframeFix').remove()
      }
  });
}); 

For modern browsers which support CSS property pointer-events, there is a better solution, see code and jsbin:

DEMO

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $('iframe').css('pointer-events','none');
         },
    stop: function(event, ui) {
        $('iframe').css('pointer-events','auto');
      }
  });
});

Answer 3

You can do it even simpler:

Javascript

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $(this).addClass('freeze')
      },
    stop: function(event, ui) {
        $(this).removeClass('freeze')
      }
  });
}); 

CSS

#resizable.freeze iframe { pointer-events: none; }