How to "properly" extend the jQuery UI Dialog widget????

[Marv4]

Having fun writing my first plugin (isrDialog) which simply extends
the jquery.ui.dialog widget to include an option for a boolean
'sticky' that when 'true' repositions the dialog on window scroll --
creating an anchored effect. The dialog can be dragged and when at
'dragStop' the position is saved so that it will be anchored at this
spot during window scroll.

 I obviously supplied an internal dragStop event option to the dialog
widget, but now if the caller of my plugin wants to supply a dragStop
option I ignore it. Here are my questions:

1)  How do I "merge" my dragStop functionality with that of the
plugin's invoker?
2)  Have I gone about implementing this plugin in a "proper way"? Are
there any "gotchas" to the approach I taken?

Here is the whole plugin's code (40 lines) -- jQuery is great!!!!

===================================================================================

(function($) {
    $.fn.isrDialog = function(options) {
        var defaults = {
            sticky: true
        },
        overrides = {
            dragStop: function(e, ui) {
                if (isSticky(this)) {
                    var left = Math.floor(ui.position.left) - $
(window).scrollLeft();
                    var top = Math.floor(ui.position.top) - $
(window).scrollTop();
                    $(this).dialog('option', 'position', [left, top]);
                };
            }
        },
        settings = $.extend({}, defaults, options, overrides);

        this.each(function() {
            if ($(this).is('div')) {
                if ($(this).hasClass('ui-dialog-content'))
                    $(this).dialog(options);
                else
                    $(this).dialog(settings);
            };
        });
        if (window.__isrDialogWindowScrollHandled === undefined) {
            window.__isrDialogWindowScrollHandled = true;
            $(window).scroll(function(e) {
                $('.ui-dialog-content').each(function() {
                    if (isSticky(this)) {
                        var position = $(this).dialog('option',
'position');
                        $(this).dialog('option', 'position',
position);
                    };
                });
            });
        };
        function isSticky(el) {
            return $(el).dialog('option', 'sticky') && $(el).dialog
('isOpen');
        };
    };
})(jQuery);

======================================================================

Thanks in advance for your time developing a reply!

Marv
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Scott González]

If all you're doing is adding a new option, why not just modify the
existing plugin instead of creating a new plugin?

Something like this should work:

var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
    var self = this;
    _init.apply(this, arguments);
    this.uiDialog.bind('dragstop', function() {
        if (self.options.sticky) {
            // handle actions on drag stop
        }
    });
};

$.ui.dialog.deafults.sticky = true;


On Jun 24, 6:58 am, Marv <mcslay...@...> wrote:

> Having fun writing my first plugin (isrDialog) which simply extends
> the jquery.ui.dialog widget to include an option for a boolean
> 'sticky' that when 'true' repositions the dialog on window scroll --
> creating an anchored effect. The dialog can be dragged and when at
> 'dragStop' the position is saved so that it will be anchored at this
> spot during window scroll.
>
>  I obviously supplied an internal dragStop event option to the dialog
> widget, but now if the caller of my plugin wants to supply a dragStop
> option I ignore it. Here are my questions:
>
> 1)  How do I "merge" my dragStop functionality with that of the
> plugin's invoker?
> 2)  Have I gone about implementing this plugin in a "proper way"? Are
> there any "gotchas" to the approach I taken?
>
> Here is the whole plugin's code (40 lines) -- jQuery is great!!!!
>
> ===================================================================================
>
> (function($) {
>     $.fn.isrDialog = function(options) {
>         var defaults = {
>             sticky: true
>         },
>         overrides = {
>             dragStop: function(e, ui) {
>                 if (isSticky(this)) {
>                     var left = Math.floor(ui.position.left) - $
> (window).scrollLeft();
>                     var top = Math.floor(ui.position.top) - $
> (window).scrollTop();
>                     $(this).dialog('option', 'position', [left, top]);
>                 };
>             }
>         },
>         settings = $.extend({}, defaults, options, overrides);
>
>         this.each(function() {
>             if ($(this).is('div')) {
>                 if ($(this).hasClass('ui-dialog-content'))
>                     $(this).dialog(options);
>                 else
>                     $(this).dialog(settings);
>             };
>         });
>         if (window.__isrDialogWindowScrollHandled === undefined) {
>             window.__isrDialogWindowScrollHandled = true;
>             $(window).scroll(function(e) {
>                 $('.ui-dialog-content').each(function() {
>                     if (isSticky(this)) {
>                         var position = $(this).dialog('option',
> 'position');
>                         $(this).dialog('option', 'position',
> position);
>                     };
>                 });
>             });
>         };
>         function isSticky(el) {
>             return $(el).dialog('option', 'sticky') && $(el).dialog
> ('isOpen');
>         };
>     };
>
> })(jQuery);
>
> ======================================================================
>
> Thanks in advance for your time developing a reply!
>
> Marv

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[jvitela]

I do something like this whenever I want to extend a widget, what do
you think?

(function($) {
        /**
         * Extend Tabs to add strip spacer
         **/
        $.fn.extend($.ui.tabs.prototype,{
                _original_init : $.ui.tabs.prototype._init,
                _init: function() {
                        this._original_init();
                        this.element.children('.ui-tabs-nav').after
('<div class="ui-tabs-strip-spacer"></div>');
                }
        });
})(jQuery);

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Charlie Tomlinson]

just curious, when you extend like this do you append the extension to ui.tabs.js or place it with document.ready functions?

jvitela wrote:

I do something like this whenever I want to extend a widget, what do
you think?

(function($) {
        /**
         * Extend Tabs to add strip spacer
         **/
        $.fn.extend($.ui.tabs.prototype,{
                _original_init : $.ui.tabs.prototype._init,
                _init: function() {
                        this._original_init();
                        this.element.children('.ui-tabs-nav').after
('<div class="ui-tabs-strip-spacer"></div>');
                }
        });
})(jQuery);



  

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Marv4]

Here's what I came up with after reading Scott G's post above (thanks
Scott!!!). Anybody have comments on this as the "preferred method" to
extend a widget?

====================================================================

// 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...
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) {
            var left = Math.floor(ui.position.left) - $
(window).scrollLeft();
            var top = Math.floor(ui.position.top) - $(window).scrollTop
();
            self.options.position = [left, top];
        };
    });
    if (window.__dialogWindowScrollHandled === undefined) {
        window.__dialogWindowScrollHandled = true;
        $(window).scroll(function(e) {
            $('.ui-dialog-content').each(function() {
                var isSticky = $(this).dialog('option', 'sticky') && $
(this).dialog('isOpen');
                if (isSticky) {
                    var position = $(this).dialog('option',
'position');
                    $(this).dialog('option', 'position', position);
                };
            });
        });
    };
};
$.ui.dialog.defaults.sticky = false;
// End of uiDialog widget extension...

===================================================================

On Jun 25, 1:14 pm, Charlie <charlie...@...> wrote:
> just curious, when you extend like this do you append the extension to ui.tabs.js or place it with document.ready functions?
> jvitela wrote:I do something like this whenever I want to extend a widget, what do you think? (function($) { /** * Extend Tabs to add strip spacer **/ $.fn.extend($.ui.tabs.prototype,{ _original_init : $.ui.tabs.prototype._init, _init: function() { this._original_init(); this.element.children('.ui-tabs-nav').after ('<div class="ui-tabs-strip-spacer"></div>'); } }); })(jQuery);
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Scott González]

You shouldn't use any global variables like
window.__dialogWindowScrollHandled.  If you need to track properties
across multiple plugin instances you should use $.ui.dialog instead of
the window.


On Jun 27, 8:37 pm, Marv <mcslay...@...> wrote:

> Here's what I came up with after reading Scott G's post above (thanks
> Scott!!!). Anybody have comments on this as the "preferred method" to
> extend a widget?
>
> ====================================================================
>
> // 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...
> 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) {
>             var left = Math.floor(ui.position.left) - $
> (window).scrollLeft();
>             var top = Math.floor(ui.position.top) - $(window).scrollTop
> ();
>             self.options.position = [left, top];
>         };
>     });
>     if (window.__dialogWindowScrollHandled === undefined) {
>         window.__dialogWindowScrollHandled = true;
>         $(window).scroll(function(e) {
>             $('.ui-dialog-content').each(function() {
>                 var isSticky = $(this).dialog('option', 'sticky') && $
> (this).dialog('isOpen');
>                 if (isSticky) {
>                     var position = $(this).dialog('option',
> 'position');
>                     $(this).dialog('option', 'position', position);
>                 };
>             });
>         });
>     };};
>
> $.ui.dialog.defaults.sticky = false;
> // End of uiDialog widget extension...
>
> ===================================================================
>
> On Jun 25, 1:14 pm, Charlie <charlie...@...> wrote:
>
> > just curious, when you extend like this do you append the extension to ui.tabs.js or place it with document.ready functions?
> > jvitela wrote:I do something like this whenever I want to extend a widget, what do you think? (function($) { /** * Extend Tabs to add strip spacer **/ $.fn.extend($.ui.tabs.prototype,{ _original_init : $.ui.tabs.prototype._init, _init: function() { this._original_init(); this.element.children('.ui-tabs-nav').after ('<div class="ui-tabs-strip-spacer"></div>'); } }); })(jQuery);

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[jvitela]

For now, I place it in another .js file which is included after the
jqueryui.js
For example:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-
ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/myExtensions.js"></script>

I do this because I want to customize the behavior of the existent
widgets.

On Jun 25, 7:14 pm, Charlie <charlie...@...> wrote:
> just curious, when you extend like this do you append the extension to ui.tabs.js or place it with document.ready functions?

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Felix Nagel]

Thanks do much for this! Works like a charm! Any arguments not to do
this? Performance?

Thanks and greetings

Felix

On 25 Jun., 17:19, jvitela <j.vi...@...> wrote:

> I do something like this whenever I want to extend a widget, what do
> you think?
>
> (function($) {
>         /**
>          * Extend Tabs to add strip spacer
>          **/
>         $.fn.extend($.ui.tabs.prototype,{
>                 _original_init : $.ui.tabs.prototype._init,
>                 _init: function() {
>                         this._original_init();
>                         this.element.children('.ui-tabs-nav').after
> ('<div class="ui-tabs-strip-spacer"></div>');
>                 }
>         });
>
> })(jQuery);

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Marv4]

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
*********************/


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Scott González]

On Jul 11, 3:17 am, Marv <mcslay...@...> wrote:
> 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.

What you did is fine.  You could also just bind to the dialogopen
event in _init.

> 2) Is there a less verbose way to specify the event extensions rather
> than repeating 'this.uiDialog.bind('??

Chain your calls to .bind().
Create a function that stores the location and pass that function to
dragstop and resizestart instead of creating duplicate functions.

Other notes:
Use self.location instead of $(self).data('location').

In your open function this code is redundant:
var el = this.element[0]
$(el).parent()... // $(el) === this.element
Also, you should just use the existing property this.uiDialog which
points to the generated wrapper.

Fixed positioning should be supported natively in 1.8 with the new
positioning plugin.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Marv4]

Thanks again Scott for your constructive comments! I understand that
v1.8 should obsolete my need for this widget extension, but I created
it for two reasons:

1) to learn how to properly create such an extension since I have
never created a plugin or widget extension before

2) I need this functionality right now

Here's my code with your suggestions implemented. I just couldn't get
the syntax correct for your "You could also just bind to the
dialogopen
event in _init. " suggestion. As it turned out having the
functionality I wanted in the open in the _init instead made more
sense -- but that's a bit of a cop out since I haven't learned how to
extend the dialog's open event yet!!!

// 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);
        if (self.options.sticky) {
            self.uiDialog.css('position', 'fixed');
        };
        this.uiDialog
            .bind('dragstop', function(event, ui) {
                if (self.options.sticky)
                    storeLocation(ui.position.left,
                                  ui.position.top);
            })
            .bind('resizestart', function(event, ui) {
                if (self.options.sticky)
                    storeLocation(ui.position.left - $
(window).scrollLeft(),
                                  ui.position.top - $(window).scrollTop
());
            })
            .bind('resizestop', function(event, ui) {
                if (self.options.sticky) {
                    self.uiDialog.css({
                        'position': 'fixed',
                        'left': self.location.left,
                        'top': self.location.top
                    });
                };
            });
        function storeLocation(_left, _top) {
            self.location = { left: _left, top: _top };
        };
    };
    $.ui.dialog.defaults.sticky = false;
})(jQuery);
/***************** End of uiDialog widget extension
*********************/

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Scott González]

Hey Marv,

This is looking better.  I would pull all of the storing functionality
into storeLocation though:

this.uiDialog
    .bind('dragstop resizestart', storeLocation)
    .bind('resizestop', ...);
function storeLocation(event, ui) {
    if (self.options.sticky) {
        self.location = ui.position;
    }
}

Does ui.position contain different information for draggable and
resizable?  I see you're removing the scroll offset when handling
resizing, but not dragging.  I would think they should be consistent,
seems like a bug if they're not.


On Jul 11, 11:26 pm, Marv <mcslay...@...> wrote:

> Thanks again Scott for your constructive comments! I understand that
> v1.8 should obsolete my need for this widget extension, but I created
> it for two reasons:
>
> 1) to learn how to properly create such an extension since I have
> never created a plugin or widget extension before
>
> 2) I need this functionality right now
>
> Here's my code with your suggestions implemented. I just couldn't get
> the syntax correct for your "You could also just bind to the
> dialogopen
> event in _init. " suggestion. As it turned out having the
> functionality I wanted in the open in the _init instead made more
> sense -- but that's a bit of a cop out since I haven't learned how to
> extend the dialog's open event yet!!!
>
> // 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);
>         if (self.options.sticky) {
>             self.uiDialog.css('position', 'fixed');
>         };
>         this.uiDialog
>             .bind('dragstop', function(event, ui) {
>                 if (self.options.sticky)
>                     storeLocation(ui.position.left,
>                                   ui.position.top);
>             })
>             .bind('resizestart', function(event, ui) {
>                 if (self.options.sticky)
>                     storeLocation(ui.position.left - $
> (window).scrollLeft(),
>                                   ui.position.top - $(window).scrollTop
> ());
>             })
>             .bind('resizestop', function(event, ui) {
>                 if (self.options.sticky) {
>                     self.uiDialog.css({
>                         'position': 'fixed',
>                         'left': self.location.left,
>                         'top': self.location.top
>                     });
>                 };
>             });
>         function storeLocation(_left, _top) {
>             self.location = { left: _left, top: _top };
>         };
>     };
>     $.ui.dialog.defaults.sticky = false;})(jQuery);
>
> /***************** End of uiDialog widget extension
> *********************/

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Marv4]

Hi Scott,

Thanks for the speedy reply. All I can say is that I did need to
account for the window scroll position when resizing but didn't need
(or want) to when dragging. That's why I didn't have the same
parameters into the storeLocation function.

RE: this syntax '.bind(event1 event2, functionToCall)' that's neat. I
didn't know you could do that (even though not too helpful in this
context).

BTW, you still didn't tell me EXACTLY how to extend the 'dialogopen'
event or function (which is it anyway? how can I figure that out?)
(syntax and example would HELP!).

Marv

On Jul 12, 9:00 am, Scott González <scott.gonza...@...> wrote:

> Hey Marv,
>
> This is looking better.  I would pull all of the storing functionality
> into storeLocation though:
>
> this.uiDialog
>     .bind('dragstop resizestart', storeLocation)
>     .bind('resizestop', ...);
> function storeLocation(event, ui) {
>     if (self.options.sticky) {
>         self.location = ui.position;
>     }
>
> }
>
> Does ui.position contain different information for draggable and
> resizable?  I see you're removing the scroll offset when handling
> resizing, but not dragging.  I would think they should be consistent,
> seems like a bug if they're not.
>
> On Jul 11, 11:26 pm, Marv <mcslay...@...> wrote:
>
>
>
> > Thanks again Scott for your constructive comments! I understand that
> > v1.8 should obsolete my need for this widget extension, but I created
> > it for two reasons:
>
> > 1) to learn how toproperlycreate such an extension since I have
> > never created a plugin or widget extension before
>
> > 2) I need this functionality right now
>
> > Here's my code with your suggestions implemented. I just couldn't get
> > the syntax correct for your "You could also just bind to the
> > dialogopen
> > event in _init. " suggestion. As it turned out having the
> > functionality I wanted in the open in the _init instead made more
> > sense -- but that's a bit of a cop out since I haven't learned how to
> >extendthedialog'sopen event yet!!!
>
> > // 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 adialoginstance,
> > it will keep thedialog'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);
> >         if (self.options.sticky) {
> >             self.uiDialog.css('position', 'fixed');
> >         };
> >         this.uiDialog
> >             .bind('dragstop', function(event, ui) {
> >                 if (self.options.sticky)
> >                     storeLocation(ui.position.left,
> >                                   ui.position.top);
> >             })
> >             .bind('resizestart', function(event, ui) {
> >                 if (self.options.sticky)
> >                     storeLocation(ui.position.left - $
> > (window).scrollLeft(),
> >                                   ui.position.top - $(window).scrollTop
> > ());
> >             })
> >             .bind('resizestop', function(event, ui) {
> >                 if (self.options.sticky) {
> >                     self.uiDialog.css({
> >                         'position': 'fixed',
> >                         'left': self.location.left,
> >                         'top': self.location.top
> >                     });
> >                 };
> >             });
> >         function storeLocation(_left, _top) {
> >             self.location = { left: _left, top: _top };
> >         };
> >     };
> >     $.ui.dialog.defaults.sticky = false;})(jQuery);
>
> > /***************** End of uiDialog widget extension
> > *********************/

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Scott González]

On Jul 12, 8:31 pm, Marv <mcslay...@...> wrote:
> Hi Scott,
>
> Thanks for the speedy reply. All I can say is that I did need to
> account for the window scroll position when resizing but didn't need
> (or want) to when dragging. That's why I didn't have the same
> parameters into the storeLocation function.

I'm seeing the exact same values in ui.position during drag and
resize, so I don't understand why you'd want to handle them
differently.

> RE: this syntax '.bind(event1 event2, functionToCall)' that's neat. I
> didn't know you could do that (even though not too helpful in this
> context).

Again, I don't see why you want to handle dragging and resizing
differently.

> BTW, you still didn't tell me EXACTLY how to extend the 'dialogopen'
> event or function (which is it anyway? how can I figure that out?)
> (syntax and example would HELP!).

I'm really not sure what you're asking about here.  Your previous code
that proxied the open method was correct (and is done exactly the same
way you're proxying init.  There's both an open function
($.ui.dialog.open) and a dialogopen event; which one you use is up to
you.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Marv4]

Scott,

If you have built a test for this widget extension try scrolling the
containing page down and then resizing the "sticky" dialog. Without
the $(window).scrollLeft / Top adjustments the dialog "jumps" down off
the bottom of the page. That's why the resizeStart saves the location
irrespective of the scroll. Quite tricky stuff and I'm not sure why
all these things happen, but I have accounted for them.

Marv

On Jul 13, 9:28 pm, Scott González <scott.gonza...@...> wrote:

> On Jul 12, 8:31 pm, Marv <mcslay...@...> wrote:
>
> > Hi Scott,
>
> > Thanks for the speedy reply. All I can say is that I did need to
> > account for the window scroll position when resizing but didn't need
> > (or want) to when dragging. That's why I didn't have the same
> > parameters into the storeLocation function.
>
> I'm seeing the exact same values in ui.position during drag and
> resize, so I don't understand why you'd want to handle them
> differently.
>
> > RE: this syntax '.bind(event1 event2, functionToCall)' that's neat. I
> > didn't know you could do that (even though not too helpful in this
> > context).
>
> Again, I don't see why you want to handle dragging and resizing
> differently.
>
> > BTW, you still didn't tell me EXACTLY how to extend the 'dialogopen'
> > event or function (which is it anyway? how can I figure that out?)
> > (syntax and example would HELP!).
>
> I'm really not sure what you're asking about here.  Your previous code
> that proxied the open method was correct (and is done exactly the same
> way you're proxying init.  There's both an open function
> ($.ui.dialog.open) and a dialogopen event; which one you use is up to
> you.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---