Panneau YUI et défilement

Question

J'ai un panneau YUI déplaçable défini comme ceci

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

Lorsque le panneau est affiché, je souhaite qu'il reste toujours visible, même lorsque la fenêtre est défilée. C'est également le cas, grâce à fixedcenter: true . Le problème est que, lorsque la fenêtre défile, le panneau se positionne au centre de la fenêtre même s’il a déjà été déplacé ailleurs.

Comment dois-je modifier la définition ci-dessus pour que la position du panneau reste constante par rapport à la fenêtre lors du défilement de la fenêtre?

Answer 1

Enveloppez votre conteneur de panneaux dans un élément d'encapsuleur à positionnement fixe, par exemple

.

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

Construisez votre panneau sans la propriété de configuration fixedcenter et centrez-le immédiatement après le rendu, par exemple,

.

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

Le panneau doit maintenant rester dans la même position lors du défilement de la fenêtre. Je n'ai testé cela qu'avec Firefox 3.0 et Internet Explorer 7 et 8.

J'ai posté la source d'un exemple autonome qui illustrera ce fonctionnement.

Answer 2

Selon la documentation, définissez le fixedcenter sur:

  

"contient" pour activer le positionnement au centre fixe, comme avec le vrai   option. Cependant, contrairement à la définition de la propriété sur true, lorsque le   propriété est définie sur "contenue", si la superposition est trop grande pour la   fenêtre d'affichage, il ne sera pas automatiquement centré lorsque l'utilisateur fera défiler   ou redimensionne la fenêtre (jusqu’à ce que la fenêtre soit suffisamment grande pour contenir le   recouvrir). Ceci est utile dans les cas où la superposition a les deux en-têtes.   et l'interface utilisateur de pied de page à laquelle l'utilisateur peut avoir besoin d'accéder.

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