For anyone following along on this discussion here's the latest
version. It uses css fixed positioning on the dialog to lock it down
and eliminate the "jumping". There is a bug in jQuery UI regarding
scrolling and fixed positioning in Google Chrome and Safari (WebKit
browsers). Dev team is aware and will patch in the next release (soon
I hope :-} ).
BTW, if anyone has some ideas on how to improve this we're all ears!!
Problems / Issues:
1) I felt like I had to kind of hack in the 'Open' extension below. I
couldn't figure out the syntax to get it into the prototype._init
function.
2) Is there a less verbose way to specify the event extensions rather
than repeating 'this.uiDialog.bind('??
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
// This code block extends the uiDialog widget by adding a new boolean
option 'sticky' which,
// by default, is set to false. When set to true on a dialog instance,
it will keep the dialog's
// position 'anchored' regardless of window scrolling.
/****************** Start of uiDialog widget extension
****************/
(function($) {
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
var self = this;
_init.apply(this, arguments);
this.uiDialog.bind('dragstop', function(event, ui) {
if (self.options.sticky) {
$(self).data('location', {
left: ui.position.left,
top: ui.position.top
});
};
});
this.uiDialog.bind('resizestart', function(event, ui) {
if (self.options.sticky) {
$(self).data('location', {
left: ui.position.left - $(window).scrollLeft(),
top: ui.position.top - $(window).scrollTop()
});
};
});
this.uiDialog.bind('resizestop', function(event, ui) {
if (self.options.sticky) {
var el = self.element[0];
$(event.target).css({
'position': 'fixed',
'left': $(self).data('location').left,
'top': $(self).data('location').top
});
};
});
};
var open = $.ui.dialog.prototype.open;
$.ui.dialog.prototype.open = function() {
open.apply(this, arguments);
if (this.options.sticky) {
var el = this.element[0];
$(el).parent().css('position', 'fixed');
};
};
$.ui.dialog.defaults.sticky = false;
})(jQuery);
/***************** End of uiDialog widget extension
*********************/