widget-position.html revision 803ad610f6cb6785d260966962fcebd31845fb7f
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich<!-- <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" /> -->
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich<!--begin custom header content for this example-->
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich.yui3-overlay-content {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich border:1px solid #000;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich background-color:#aaa;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich font-size:93%;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich.yui3-overlay-content .yui3-widget-hd {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich font-weight:bold;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich text-align:center;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich border:2px solid #aa0000;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich background-color:#fff;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich.yui3-overlay-content .yui3-widget-bd {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich text-align:left;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich border:2px solid #0000aa;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich background-color:#fff;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich/* Example Layout CSS */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich.overlay-example {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich position:relative;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich border:1px solid #000;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich background-color:#eee;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich.overlay-example button {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich margin-left:1px;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich.overlay-example .filler {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich border:1px solid #000;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich text-align:center;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich.align-box .title {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich font-weight:bold;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich position:static;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich background-color:#0000cc;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich position:relative;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich background-color:#00cc00;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich position:absolute;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich bottom:130px;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich background-color:#cc0000;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich display:inline;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich background-color:#fff;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich border:1px solid black;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich font-size:85%;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich margin-left:5px;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich<!--end custom header content for this example-->
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich This example shows how you can use Overlay's extended positioning support to align or center the overlay either in the viewport or relative to another node on the page. You can specify any one of 9 points (top-left, top-right, bottom-left, bottom-right, top-center, bottom-center, left-center, right-center, center) to align on both the Overlay and the node/viewport it is being aligned to.
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich<div class="overlay-example" id="overlay-align">
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <p><pre id="alignment"></pre><span id="step"></span></p>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <button type="button" id="align">Next Alignment</button>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <button type="button" id="show">Show Overlay</button>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <button type="button" id="hide">Hide Overlay</button>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <button type="button" id="destroy">Destroy Overlay</button>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <button type="button" id="create">Create Overlay</button>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <p class="filler">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pretium quam eu mi varius pulvinar. Duis orci arcu, ullamcorper sit amet, luctus ut, interdum ac, quam. Pellentesque euismod. Nam tincidunt, purus in ultrices congue, urna neque posuere arcu, aliquam tristique purus sapien id nulla. Etiam rhoncus nulla at leo. Cras scelerisque nisl in nibh. Sed eget odio. Morbi elit elit, porta a, convallis sit amet, rhoncus non, felis. Mauris nulla pede, pretium eleifend, porttitor at, rutrum id, orci. Quisque non urna. Nulla aliquam rhoncus est.</p>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <div id="align1" class="align-box"><span class="title">id = #align1</span></div>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <div id="align2" class="align-box"><span class="title">id = #align2</span></div>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich <div id="align3" class="align-box"><span class="title">id = #align3</span></div>
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen RabinovichYUI({ filter: 'raw' }).use("overlay", function(Y) {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich /* Create Overlay from script, this time. No footer */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich function initOverlay() {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich if (!overlay) {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich overlay = new Y.Overlay({
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich width:"10em",
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich height:"10em",
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich headerContent: "Aligned Overlay",
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich bodyContent: "Click the 'Align Next' button",
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich //change the alignment settings
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich eventName: 'scroll'
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich node : Y.one('#overlay-align'),
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich eventName: 'click'
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich node : Y.one('win'),
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich eventName: 'resize'
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich /* Render it to #overlay-align element */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich overlay.render("#overlay-align");
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich initOverlay();
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich var alignment = Y.one("#alignment");
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich var stepNumber = Y.one("#step");
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich /* Setup local variable for Y.WidgetPositionAlign, since we use it multiple times */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich var WidgetPositionAlign = Y.WidgetPositionAlign;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich var steps = [
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich /* Center in #overlay-align */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich overlay.set("align", {node:"#overlay-align", points:[WidgetPositionAlign.CC, WidgetPositionAlign.CC]});
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich alignment.set("innerHTML", 'align: {node:"#overlay-align", points:["cc", "cc"]}');
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich /* Align top-left corner of overlay, with top-right corner of #align1 */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich overlay.set("align", {node:"#align1", points:[WidgetPositionAlign.TL, WidgetPositionAlign.TR]});
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich alignment.set("innerHTML", 'align: {node:"#align1", points:["tl", "tr"]}');
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich /* Center overlay in #align2 */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich overlay.set("centered", "#align2");
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich alignment.set("innerHTML", 'centered: "#align2"');
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich /* Align right-center edge of overlay with right-center edge of viewport */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich overlay.set("align", {points:[WidgetPositionAlign.RC, WidgetPositionAlign.RC]});
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich alignment.set("innerHTML", 'align: {points:["rc", "rc"]} (viewport)');
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich /* Center overlay in viewport */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich overlay.set("centered", true);
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich alignment.set("innerHTML", "centered: true (viewport)");
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich /* Align top-center edge of overlay with bottom-center edge of #align3 */
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich overlay.set("align", {node:"#align3", points:[WidgetPositionAlign.TC, WidgetPositionAlign.BC]});
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich alignment.set("innerHTML", 'align: {node:"#align3", points:["tc", "bc"]}');
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich var step = 0;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich var totalSteps = steps.length;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich function alignNext() {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich if (overlay) {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich stepNumber.set("innerHTML", "Alignment " + (step+1) + " of " + totalSteps);
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich steps[step]();
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich step = (++step)%(totalSteps);
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich Y.on("click", alignNext, "#align");
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich Y.one('#show').on('click', function(e) {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich Y.one('#hide').on('click', function(e) {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich Y.one('#destroy').on('click', function(e) {
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich overlay = null;
5c62b3a15fd9e2709acc2ff32869fba56bb7d30eAllen Rabinovich Y.one("#create").on('click', initOverlay);