JQuery’s Resizable of position: fixed; divs. Also: iframes.
As per a common and old bug with JQuery UI’s .resizable() method, you can’t, out of the box, perform re-sizing of a position: fixed; div.
My usecase for this was a panel-like page. I wanted the bottom “panel” to be re-sizable. The bottom panel was, in fact, position: fixed;.
After tons of Googling, Chome Inspector-stalking and trial-and-error, I came up with a solution that allows me to do this. The part I was not realizing in most of my testing, was that when .resizable() changes position: fixed; to position: absolute, it also adds a “top: 0;”… Figuring that out allowed me to solve the problem.
$(document).ready(function() {
$("#fixed_div").resizable({
handles: 'n',
resize: function(event, ui) {
$("#fixed_div").css("position", "fixed");
$("#fixed_div").css("bottom", "0px");
$("#fixed_div").css("top", "");
}
});
});
The next issue was that a large portion of the div right above this element was an iframe. Another known bug with Resizable is that it doesn’t work too well when you’re resizing and your cursor moves over an iframe. Some Googling later, I came up with this (pardon the ugly long line, I didn’t clean this up much):
$(document).ready(function() {
$("#fixed_div").resizable({
handles: 'n',
resize: function(event, ui) {
$("#fixed_div").css("position", "fixed");
$("#fixed_div").css("bottom", "0px");
$("#fixed_div").css("top", "");
},
start: function () {
var d = $("<div class='iframeCover' \
style='zindex:99;position:absolute;width:100%;top:0px;left:0px;\
height:" + $("#div_that_contains_iframe").height() + "px'></div>");
$("#div_that_contains_iframe").append(d);
},
stop: function () {
$('.iframeCover').remove();
},
});
});
This is just a modified version of this Stack Overflow answer. And there you have it.
