Question

I have a web page with an iframe in it (I don’t like it, but that’s the way it has to be). It’s not a cross-domain iframe so there’s nothing to worry about there.

I have written a jQuery extension that does the centering of a ModalPopup (which is called from an overridden AjaxControlToolkit.ModalPopupBehavior._layout method) based on the width and height of the iframe’s parent, so that it looks centered even though the iframe is not in the center of the page. It’s a lot of tricky stuff, especially since the web page I added the iframe to runs in quirks mode.

Now, I’ve also overridden AjaxControlToolkit.ModalPopupBehavior._attachPopup, so that when the parent window resizes or scrolls, the ModalPopup inside of the iframe recenter’s itself relative to the new size of the parent window. However, the same code that attaches the popup to the parent window’s resize event does NOT work for the parent window’s scroll event. See the code below, and the comments:

AjaxControlToolkit.ModalPopupBehavior.prototype._attachPopup = function() {
    /// <summary>
    /// Attach the event handlers for the popup to the PARENT window
    /// </summary>
    if (this._DropShadow && !this._dropShadowBehavior) {
        this._dropShadowBehavior = $create(AjaxControlToolkit.DropShadowBehavior, {}, null, null, this._popupElement);
    }
    if (this._dragHandleElement && !this._dragBehavior) {
        this._dragBehavior = $create(AjaxControlToolkit.FloatingBehavior, {"handle" : this._dragHandleElement}, null, null, this._foregroundElement);
    }        
    $addHandler(parent.window, 'resize', this._resizeHandler); // <== This WORKS
    $addHandler(parent.window, 'scroll', this._scrollHandler); // <== This DOES NOT work
    this._windowHandlersAttached = true;
}

Can anybody explain to me why the resize event works while the scroll event doesn’t? Any suggestions or alternatives out there to help me out? I am working with jQuery, so if I can use something besides the $addHandler method from MS that’d be fine. Be aware that I also have to override the _detachPopup function to remove the handler, so I need to take that into account.

Thanks!

Answer 1

Nevermind, quirks mode bit me again. Getting the scrollTop position from the parent was failing because it’s documentElement didn’t exist. I switched

$(top.window.document.documentElement).scrollTop();

to

$(top.window.document.body).scrollTop();

in my jQuery extension centering code and it’s happy now.