YUI Panel and scrolling

Question

I have a draggable YUI Panel defined like this

new YAHOO.widget.Panel("parameters", {
                        fixedcenter: true,
                        constraintoviewport: true,
                        underlay: "shadow",
                        visible: false,
                        close: true,
                        draggable: true,
                        width: "350px" });

When the panel is shown, I want it to remain always visible, even when the window is scrolled. This is also the case, thanks to fixedcenter: true. The problem is that when the window is scrolled the panel positions itself to the center of the window even if it was dragged somewhere else previously.

How should I modify the above definition so that the position of the panel remains constant relative to the window when the window is scrolled?

Answer 1

Wrap your panel container in a wrapper element that has fixed positioning, e.g.

<div id="wrapper" style="position: fixed">
    <div id="parameters">
        <div class="hd">Header</div>
        <div class="bd">Hello, this is my awesome panel.</div>
        <div class="ft">Footer</div>
    </div>
</div>

Construct your panel without the fixedcenter configuration property, and center the panel immediately after you render it, e.g.

var panel = new YAHOO.widget.Panel("parameters", {
        constraintoviewport: true,
        underlay: "shadow",
        visible: false,
        close: true,
        draggable: true,
        width: "350px"
    });
panel.render();
panel.center();

The panel should now stay in the same position when the window is scrolled. I only tested this in Firefox 3.0 and Internet Explorer 7 and 8.

I've posted the source of a self-contained example that will demonstrate this working.

Answer 2

As per the documentation, set the fixedcenter to:

"contained" To enable fixed center positioning, as with the true option. However, unlike setting the property to true, when the property is set to "contained", if the overlay is too big for the viewport, it will not get automatically centered when the user scrolls or resizes the window (until the window is large enough to contain the overlay). This is useful in cases where the Overlay has both header and footer UI controls which the user may need to access.

http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html