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. The div is placed over a "full-screen" iframe. In the linked example this iframe has: display: none
.
If I modify it to display: block
, and re-run the script the reziable plugin will have some strange behavior. You can try it here: http://jsbin.com/efosed/6/edit . It will not handle mouse events correctly. What can be the reason, and how can I fix it?
You have to implement your own logic to fix iframe. One solution is to add a div over your iframe:
$(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:
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
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; }
CSS only method
.ui-resizable-resizing iframe { pointer-events: none; }
The ui-resizable-resizing
class is added whenever you are resizing something.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.