YUI Library Examples: Overlay: Basic XY Positioning

Overlay: Basic XY Positioning

Basic XY Overlay Positioning

Setting Up The YUI Instance

To create an instance of an Overlay on you 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-ext and widget-stdmod dependencies it has.

YUI({...}).use("overlay", function(Y) {
    // We'll write example code here, where we have a Y.Overlay class available.
});

YUI({...}).use("overlay", function(Y) {
    // We'll write example code here, where we have a Y.Overlay class available.
});

Note, 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.

Creating The Overlay From Markup

For this example, we'll create the overlay instance from markup which already exists on the page, and is shown below:

<div id="overlay">
    <div class="yui-widget-hd">Overlay Header</div>
    <div class="yui-widget-bd">Overlay Body</div>
    <div class="yui-widget-ft">Overlay Footer</div>
</div>

<div id="overlay">
    <div class="yui-widget-hd">Overlay Header</div>
    <div class="yui-widget-bd">Overlay Body</div>
    <div class="yui-widget-ft">Overlay Footer</div>
</div>

The container DIV with id="overlay" is specified as the contentBox for the Overlay instance, and during instantiation, the overlay will look for DIV's marked with the yui-widget-hd, yui-widget-bd, yui-widget-ft classes to setup the Overlay's header, body and footer content attributes.

Instantiating The Overlay

To create an overlay instance, we use the overlay constructor Y.Overlay, and pass it the contentBox node reference for the existing markup on the page. We also set a height/width for the overlay and the initial position for the Overlay (which otherwise defaults to 0,0):

// Create an overlay from markup, using an existing contentBox.
var overlay = new Y.Overlay({
    contentBox:"#overlay",
    width:"10em",
    height:"10em",
    xy:[xy[0] + 10, xy[1] + 35]
});
overlay.render();

// Create an overlay from markup, using an existing contentBox.
var overlay = new Y.Overlay({
    contentBox:"#overlay",
    width:"10em",
    height:"10em",
    xy:[xy[0] + 10, xy[1] + 35]
});
overlay.render();

After creating the overlay instance, we invoke overlay.render() to update the DOM to reflect the current state of the overlay. Before render is called, the state of the Overlay should not be reflected in the DOM (for example, we can change the height, without it being reflected in the DOM. When we finally render, the current height value will be applied to the DOM). We could also pass an optional node reference to the render method, to have the overlay rendered under a different parent node, from where the content box currently lies.

Moving the Overlay

Overlays have support for basic page based XY positioning. This example provides a couple of input controls which can be used to move the overlay to a specific XY page co-ordinate. Later examples will show how Overlay's extended positioning support to align/center the Overlay relative to other elements on the page.

var xInput = Y.one("#x");
var yInput = Y.one("#y");
 
Y.on("click", function(e) {
 
    var x = parseInt(xInput.get("value"));
    var y = parseInt(yInput.get("value"));
 
    overlay.move(x,y);
}, "#move");

var xInput = Y.one("#x");
var yInput = Y.one("#y");
 
Y.on("click", function(e) {
 
    var x = parseInt(xInput.get("value"));
    var y = parseInt(yInput.get("value"));
 
    overlay.move(x,y);
}, "#move");

Overlay can be moved by invoking the move method, with either seperate x and y arguments (move(100,200)), or as an array (move([100,200])). The x, y and xy attributes can also be used to move the overlay, and are equivalent to the move method (overlay.set("x", 200);overlay.set("xy", [100,200]))

A select dropdown is added to the example page, along with additional content, to demonstrate the Overlay's ability to provide stacking and shimming support (to block select dropdown bleed through in IE6).

CSS: Overlay Look/Feel

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, body and footer sections:

/* Overlay Look/Feel */
.yui-overlay-content {
    padding:3px;
    border:1px solid #000;
    background-color:#aaa;
}
 
.yui-overlay-content .yui-widget-hd {
    padding:5px;
    border:2px solid #aa0000;
    background-color:#fff;
}
 
.yui-overlay-content .yui-widget-bd {
    padding:5px;
    border:2px solid #0000aa;
    background-color:#fff;
}
 
.yui-overlay-content .yui-widget-ft {
    padding:5px;
    border:2px solid #00aa00;
    background-color:#fff;
}

/* Overlay Look/Feel */
.yui-overlay-content {
    padding:3px;
    border:1px solid #000;
    background-color:#aaa;
}
 
.yui-overlay-content .yui-widget-hd {
    padding:5px;
    border:2px solid #aa0000;
    background-color:#fff;
}
 
.yui-overlay-content .yui-widget-bd {
    padding:5px;
    border:2px solid #0000aa;
    background-color:#fff;
}
 
.yui-overlay-content .yui-widget-ft {
    padding:5px;
    border:2px solid #00aa00;
    background-color:#fff;
}

NOTE: As discussed on the Widget landing page, all widgets are enclosed in 2 containing elements - the boundingBox is the outer(most) element, and the contentBox is the inner element into which the widget's content is added. It is advised to apply any look/feel CSS for the widget to the content box and it's children. This leaves the bounding box without padding/borders, allowing for consistent positioning/sizing across box models.