<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Basic XY Positioning</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Basic XY Positioning</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><style type="text/css" scoped>
/* Hide overlay markup while loading, if js is enabled */
.yui3-js-enabled .yui3-overlay-loading {
top:-1000em;
left:-1000em;
position:absolute;
}
/* Overlay Look/Feel */
.yui3-overlay-content {
background-color: #ECEFFB;
border: 1px solid #9EA8C6;
border-radius: 3px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}
.yui3-overlay-content .yui3-widget-hd {
background-color: #B6BFDA;
color: #30418C;
font-size: 120%;
font-weight: bold;
padding: 0.2em 0.5em 0.3em;
border-radius: 2px 2px 0 0;
}
.yui3-overlay-content .yui3-widget-bd {
padding: 0.4em 0.6em 0.5em;
}
.yui3-overlay-content .yui3-widget-ft {
background-color:#DFE3F5;
padding: 0.4em 0.6em 0.5em;
border-radius: 0 0 2px 2px;
}
/* Example Layout CSS */
.overlay-example {
padding:5px;
margin:10px 0;
height:15em;
}
.overlay-example button, .overlay-example label, .overlay-example select, .overlay-example input {
margin-right:1px;
}
.overlay-example select.needs-shim {
width:100%;
}
.overlay-example .filler {
color:#999;
}
#hide {
margin-left:15px;
}
#x, #y {
width:3em;
}
</style>
<div class="intro">
<p>This example walks you through basics of creating and positioning an Overlay. It walks you through setting up the sandbox environment for the Overlay, including the required modules, and instantiating the Overlay based on markup already on the page.</p>
<p>It also provides a couple of input fields, allowing you to invoke the Overlay's <code>move()</code> method, to move the Overlay to a specific XY position on the page.</p>
</div>
<div class="example">
<div class="overlay-example" id="overlay-position">
<label>X: <input type="text" id="x" value="0" ></label>
<label>Y: <input type="text" id="y" value="0" ></label>
<button type="button" id="move">Move</button>
<button type="button" id="hide">Hide</button>
<button type="button" id="show">Show</button>
<div id="overlay" class="yui3-overlay-loading">
<div class="yui3-widget-hd">Overlay Header</div>
<div class="yui3-widget-bd">Overlay Body</div>
<div class="yui3-widget-ft">Overlay Footer</div>
</div>
<p class="filler">
<select class="needs-shim">
<option>Prevent IE6 Bleedthrough</option>
</select>
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>
</div>
<script type="text/javascript">
YUI().use("overlay", function(Y) {
var xy = Y.one("#overlay-position").getXY();
// Create an overlay from markup
var overlay = new Y.Overlay({
srcNode:"#overlay",
width:"13em",
height:"10em",
xy:[xy[0] + 30, xy[1] + 38]
});
overlay.render();
var xInput = Y.one("#x");
var yInput = Y.one("#y");
// Using round to round sub-pixel values for FF3 just
// to make the text box values prettier.
xInput.set("value", Math.round(overlay.get("x")));
yInput.set("value", Math.round(overlay.get("y")));
Y.on("click", function(e) {
var x = parseInt(xInput.get("value"));
var y = parseInt(yInput.get("value"));
overlay.move(x,y);
}, "#move");
Y.on("click", Y.bind(overlay.show, overlay), "#show");
Y.on("click", Y.bind(overlay.hide, overlay), "#hide");
});
</script>
</div>
<h2>Basic XY Overlay Positioning</h2>
<h3>Setting Up The YUI Instance</h3>
<p>To create an instance of an Overlay on your page, the only module you need to request is the <code>overlay</code> module. The <code>overlay</code> module will pull in the <code>widget</code>, <code>widget-stack</code>, <code>widget-position</code>, <code>widget-position-align</code>, <code>widget-position-constrain</code> and <code>widget-stdmod</code> extensions it uses.</p>
<pre class="code prettyprint">YUI({...}).use("overlay", function(Y) {
// We'll write example code here, where we have a Y.Overlay class available.
});</pre>
<p>Note, using the <code>overlay</code> 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.</p>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
<h3>Creating the Overlay From Markup</h3>
<p>For this example, we'll create the overlay instance from markup which already exists on the page, and is shown below. We mark the existing markup with the <code>yui3-overlay-loading</code> class, so that we can hide it while the rich control is being instantiated:</p>
<pre class="code prettyprint"><div id="overlay" class="yui3-overlay-loading">
<div class="yui3-widget-hd">Overlay Header</div>
<div class="yui3-widget-bd">Overlay Body</div>
<div class="yui3-widget-ft">Overlay Footer</div>
</div></pre>
<p>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 <code>yui3-widget-hd, yui3-widget-bd, yui3-widget-ft</code> classes to setup the Overlay's header, body and footer content attributes.</p>
<h3>Instantiating the Overlay</h3>
<p>To create an overlay instance, we use the overlay constructor <code>Y.Overlay</code>, and pass it the <code>contentBox</code> 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):</p>
<pre class="code prettyprint">// Create an overlay from markup, using an existing contentBox.
var overlay = new Y.Overlay({
srcNode:"#overlay",
width:"13em",
height:"10em",
xy:[xy[0] + 30, xy[1] + 38]
});
overlay.render();</pre>
<p>After creating the overlay instance, we invoke <code>overlay.render()</code> 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.</p>
<h3>Moving the Overlay</h3>
<p>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.</p>
<pre class="code prettyprint">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");</pre>
<p>Overlay can be moved by invoking the <code>move</code> method, with either separate x and y arguments (<code>move(100,200)</code>), or as an array (<code>move([100,200])</code>). The <code>x, y and xy</code> attributes can also be used to move the overlay, and are equivalent to the move method (<code>overlay.set("x", 200);overlay.set("xy", [100,200])</code>)</p>
<p>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).</p>
<h3>CSS: Overlay Look/Feel</h3>
<p>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.</p>
<p>The example provides its own look and feel for the Overlay, by defining rules for the content box, header, body and footer sections, and also specifies how markup should be hidden while the overlay is loading.</p>
<pre class="code prettyprint">/* Hide overlay markup while loading, if js is enabled */
.yui3-js-enabled .yui3-overlay-loading {
top: -1000em;
left: -1000em;
position: absolute;
}
/* Overlay Look/Feel */
.yui3-overlay-content {
background-color: #ECEFFB;
border: 1px solid #9EA8C6;
border-radius: 3px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}
.yui3-overlay-content .yui3-widget-hd {
background-color: #B6BFDA;
color: #30418C;
font-size: 120%;
font-weight: bold;
padding: 0.2em 0.5em 0.3em;
border-radius: 2px 2px 0 0;
}
.yui3-overlay-content .yui3-widget-bd {
padding: 0.4em 0.6em 0.5em;
}
.yui3-overlay-content .yui3-widget-ft {
background-color:#DFE3F5;
padding: 0.4em 0.6em 0.5em;
border-radius: 0 0 2px 2px;
}</pre>
<p><strong>Note:</strong> As discussed on the <a href="../widget/index.html#widget-markup-diagram">Widget user guide</a>, 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 its children. This leaves the bounding box without padding/borders, allowing for consistent positioning/sizing across box models.</p>
<h2>Complete Example Source</h2>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
<pre class="code prettyprint"><div class="overlay-example" id="overlay-position">
<label>X: <input type="text" id="x" value="0" ></label>
<label>Y: <input type="text" id="y" value="0" ></label>
<button type="button" id="move">Move</button>
<button type="button" id="hide">Hide</button>
<button type="button" id="show">Show</button>
<div id="overlay" class="yui3-overlay-loading">
<div class="yui3-widget-hd">Overlay Header</div>
<div class="yui3-widget-bd">Overlay Body</div>
<div class="yui3-widget-ft">Overlay Footer</div>
</div>
<p class="filler">
<select class="needs-shim">
<option>Prevent IE6 Bleedthrough</option>
</select>
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>
</div>
<script type="text/javascript">
YUI().use("overlay", function(Y) {
var xy = Y.one("#overlay-position").getXY();
// Create an overlay from markup
var overlay = new Y.Overlay({
srcNode:"#overlay",
width:"13em",
height:"10em",
xy:[xy[0] + 30, xy[1] + 38]
});
overlay.render();
var xInput = Y.one("#x");
var yInput = Y.one("#y");
// Using round to round sub-pixel values for FF3 just
// to make the text box values prettier.
xInput.set("value", Math.round(overlay.get("x")));
yInput.set("value", Math.round(overlay.get("y")));
Y.on("click", function(e) {
var x = parseInt(xInput.get("value"));
var y = parseInt(yInput.get("value"));
overlay.move(x,y);
}, "#move");
Y.on("click", Y.bind(overlay.show, overlay), "#show");
Y.on("click", Y.bind(overlay.hide, overlay), "#hide");
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support.">
<a href="overlay-xy.html">Basic XY Positioning</a>
</li>
<li data-description="Shows how to create a simple tooltip incorporating the overlay shim feature.">
<a href="overlay-tooltip.html">Simple Tooltip</a>
</li>
<li data-description="Shows how to use the Overlay's XY alignment support, to align the Overlay relative to another element, or to the viewport.">
<a href="overlay-align.html">Alignment Support</a>
</li>
<li data-description="Shows how to use the Overlay's zindex and shim support when positioning Overlays above other elements on the page.">
<a href="overlay-stack.html">Stack Support</a>
</li>
<li data-description="Shows how to modify content in the Overlay's header, body and footer sections.">
<a href="overlay-stdmod.html">Standard Module Support</a>
</li>
<li data-description="Shows how to use Overlay's constrainment support, to limit the XY value which can be set for an Overlay.">
<a href="overlay-constrain.html">Constrain Support</a>
</li>
<li data-description="Shows how to create a simple plugin to retrieve content for the Overlay using the io utility.">
<a href="overlay-io-plugin.html">IO Plugin</a>
</li>
<li data-description="Shows how to create a simple plugin to animate the Overlay's movement and visibility.">
<a href="overlay-anim-plugin.html">Animation Plugin</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.">
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a>
</li>
<li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/overlay',
name: 'overlay-xy',
title: 'Basic XY Positioning',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('overlay-xy');
YUI.Env.Tests.examples.push('overlay-tooltip');
YUI.Env.Tests.examples.push('overlay-align');
YUI.Env.Tests.examples.push('overlay-stack');
YUI.Env.Tests.examples.push('overlay-stdmod');
YUI.Env.Tests.examples.push('overlay-constrain');
YUI.Env.Tests.examples.push('overlay-io-plugin');
YUI.Env.Tests.examples.push('overlay-anim-plugin');
YUI.Env.Tests.examples.push('node-focusmanager-button');
YUI.Env.Tests.examples.push('stylesheet-theme');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>