YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Overlay: Constrain Support

## Overlay: Constrain Support

This example shows how you can use Overlay's constrained positioning support to constrain the XY position of the overlay so that it remains within another node on the page (or within the viewport).

View example in new window.

### Overlay Constrained XY Positioning

#### Setting Up The YUI Instance

As with the "Basic XY Positioning" example, to create an instance of an Overlay on your page, the only module you need to request is the `overlay` module. The `overlay` module will pull in the `widget`, `widget-stack`, `widget-position`, `widget-position-align`, `widget-position-constrain` and `widget-stdmod` extensions it uses.

    YUI({...}).use("overlay", function(Y) {    // We'll write example code here, where we have a Y.Overlay class     // available, which is bundled with XY positioning, align and     // constrain support.});

    YUI({...}).use("overlay", function(Y) {
        // We'll write example code here, where we have a Y.Overlay class
        // available, which is bundled with XY positioning, align and
        // constrain support.
    });

YUI({...}).use("overlay", function(Y) { // We'll write example code here, where we have a Y.Overlay class // available, which is bundled with XY positioning, align and // constrain support. });

Using the `overlay` module, will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.

#### Instantiating The Overlay

For this example, we'll instantiate an Overlay from script, as we did for the "Alignment Support" example, but use the `render` attribute to specify the node under which we want the Overlay to be rendered in the DOM, and to indicate that we want it rendered on construction. The `render` attribute is a sugar attribute for the `render()` method:

        /* Create Overlay from script */    var overlay = new Y.Overlay({        id:"overlay",         width:"140px",        height:"120px",         headerContent: "Constrained",        bodyContent: "Use the sliders to move the overlay",        footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>',         align:{node:"#constrain-box", points:["cc", "cc"]},        constrain:"#constrain-box",         render: "#overlay-example"    });

        /* Create Overlay from script */
        var overlay = new Y.Overlay({
            id:"overlay",

            width:"140px",
            height:"120px",

            headerContent: "Constrained",
            bodyContent: "Use the sliders to move the overlay",
            footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>',

            align:{node:"#constrain-box", points:["cc", "cc"]},
            constrain:"#constrain-box",

            render: "#overlay-example"
        });

/* Create Overlay from script */ var overlay = new Y.Overlay({ id:"overlay", width:"140px", height:"120px", headerContent: "Constrained", bodyContent: "Use the sliders to move the overlay", footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>', align:{node:"#constrain-box", points:["cc", "cc"]}, constrain:"#constrain-box", render: "#overlay-example" });

We align the overlay to the center of the `#constrain-box` node, which we're also using as the constraining node for the overlay. The `constrain` attribute accepts a node reference (either an actual Node instance, or a string selector reference), or it can simply be set to `true` to constrain the overlay to the Viewport.

#### Demonstrating Constrained Support

For this example, we set up a couple of Slider instances which can be used to set the overlay's `x` and `y` attribute values.

         // Get the current XY position of the overlay     // (after it's been center aligned) to set the     // initial value for the sliders    var overlayXY = Y.one("#overlay").getXY();     // Get the region for the constraing box    var constrainRegion = Y.one("#constrain-box").get("region");     // X-Axis    var sx = new Y.Slider({        id:"x",        length: "450px",        min: constrainRegion.left - 50,        max: constrainRegion.right + 50,        value: overlayXY[0],        render:"#overlay-example"    });     // Y Axis    var sy = new Y.Slider({        id:"y",        axis: 'y',        length: "400px",        min: constrainRegion.top - 50,         max:constrainRegion.bottom + 50,        value: overlayXY[1],        render: "#overlay-example"    });

        // Get the current XY position of the overlay
        // (after it's been center aligned) to set the
        // initial value for the sliders
        var overlayXY = Y.one("#overlay").getXY();

        // Get the region for the constraing box
        var constrainRegion = Y.one("#constrain-box").get("region");

        // X-Axis
        var sx = new Y.Slider({
            id:"x",
            length: "450px",
            min: constrainRegion.left - 50,
            max: constrainRegion.right + 50,
            value: overlayXY[0],
            render:"#overlay-example"
        });

        // Y Axis
        var sy = new Y.Slider({
            id:"y",
            axis: 'y',
            length: "400px",
            min: constrainRegion.top - 50,
            max:constrainRegion.bottom + 50,
            value: overlayXY[1],
            render: "#overlay-example"
        });

// Get the current XY position of the overlay // (after it's been center aligned) to set the // initial value for the sliders var overlayXY = Y.one("#overlay").getXY(); // Get the region for the constraing box var constrainRegion = Y.one("#constrain-box").get("region"); // X-Axis var sx = new Y.Slider({ id:"x", length: "450px", min: constrainRegion.left - 50, max: constrainRegion.right + 50, value: overlayXY[0], render:"#overlay-example" }); // Y Axis var sy = new Y.Slider({ id:"y", axis: 'y', length: "400px", min: constrainRegion.top - 50, max:constrainRegion.bottom + 50, value: overlayXY[1], render: "#overlay-example" });

We set the `min` and `max` values of the slider instances to allow the overlay to be moved beyond the edge of the constraining region, and set the initial `value` of the sliders to reflect the current centered position of the overlay.

Finally, we set up `valueChange` listeners for the sliders, when attempt to set the corresponding axis position of the overlay:

        // Set the overlay's x attribute value    sx.after("valueChange", function(e) {        overlay.set("x", e.newVal);    });     // Set the overlay's y attribute value    sy.after("valueChange", function(e) {        overlay.set("y", e.newVal);    });

        // Set the overlay's x attribute value
        sx.after("valueChange", function(e) {
            overlay.set("x", e.newVal);
        });

        // Set the overlay's y attribute value
        sy.after("valueChange", function(e) {
            overlay.set("y", e.newVal);
        });

// Set the overlay's x attribute value sx.after("valueChange", function(e) { overlay.set("x", e.newVal); }); // Set the overlay's y attribute value sy.after("valueChange", function(e) { overlay.set("y", e.newVal); });

#### CSS: Overlay Look/Feel

As mentioned in the "Basic XY Positioning" example, the overlay.css Sam Skin file (build/overlay/assets/skins/sam/overlay.css) provides the default functional CSS for the overlay. Namely the CSS rules to hide the overlay, and position it absolutely. However there's no default out-of-the-box look/feel applied to the Overlay widget.

The example provides it's own look and feel for the Overlay, by defining rules for the content box, header and body sections:

    /* Overlay Look/Feel *//* Overlay Look/Feel */.yui3-overlay-content {    text-align:center;    padding:2px;    border:1px solid #000;    background-color:#aaa;    font-size:93%;} .yui3-overlay-content .yui3-widget-hd {    font-weight:bold;    padding:5px;    border:2px solid #aa0000;    background-color:#fff;} .yui3-overlay-content .yui3-widget-ft {    padding:5px;    border:2px solid #000;    background-color:#ccc;} .yui3-overlay-content .yui3-widget-bd {    padding:5px;    border:2px solid #0000aa;    background-color:#fff;}

    /* Overlay Look/Feel */
    /* Overlay Look/Feel */
    .yui3-overlay-content {
        text-align:center;
        padding:2px;
        border:1px solid #000;
        background-color:#aaa;
        font-size:93%;
    }

    .yui3-overlay-content .yui3-widget-hd {
        font-weight:bold;
        padding:5px;
        border:2px solid #aa0000;
        background-color:#fff;
    }

    .yui3-overlay-content .yui3-widget-ft {
        padding:5px;
        border:2px solid #000;
        background-color:#ccc;
    }

    .yui3-overlay-content .yui3-widget-bd {
        padding:5px;
        border:2px solid #0000aa;
        background-color:#fff;
    }

/* Overlay Look/Feel */ /* Overlay Look/Feel */ .yui3-overlay-content { text-align:center; padding:2px; border:1px solid #000; background-color:#aaa; font-size:93%; } .yui3-overlay-content .yui3-widget-hd { font-weight:bold; padding:5px; border:2px solid #aa0000; background-color:#fff; } .yui3-overlay-content .yui3-widget-ft { padding:5px; border:2px solid #000; background-color:#ccc; } .yui3-overlay-content .yui3-widget-bd { padding:5px; border:2px solid #0000aa; background-color:#fff; }

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings