node-align.html revision 99030181384118f852c69f20f3b931bf796ec8fa
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz<html>
af0732a2bf24fbea12a085b855224577e7101851kiirala<head>
af0732a2bf24fbea12a085b855224577e7101851kiirala<meta http-equiv="content-type" content="text/html; charset=utf-8">
af0732a2bf24fbea12a085b855224577e7101851kiirala<title>Extended XY Positioning</title>
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala<style type="text/css">
af0732a2bf24fbea12a085b855224577e7101851kiirala/*margin and padding on body element
af0732a2bf24fbea12a085b855224577e7101851kiirala can introduce errors in determining
af0732a2bf24fbea12a085b855224577e7101851kiirala element position and are not recommended;
af0732a2bf24fbea12a085b855224577e7101851kiirala we turn them off as a foundation for YUI
af0732a2bf24fbea12a085b855224577e7101851kiirala CSS treatments. */
af0732a2bf24fbea12a085b855224577e7101851kiiralabody {
af0732a2bf24fbea12a085b855224577e7101851kiirala margin:0 auto;
af0732a2bf24fbea12a085b855224577e7101851kiirala padding:0;
af0732a2bf24fbea12a085b855224577e7101851kiirala width: 50em;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala#test-bleed {
af0732a2bf24fbea12a085b855224577e7101851kiirala text-align: center;
af0732a2bf24fbea12a085b855224577e7101851kiirala margin: auto;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala</style>
af0732a2bf24fbea12a085b855224577e7101851kiirala
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css" />
af0732a2bf24fbea12a085b855224577e7101851kiirala<script type="text/javascript" src="/build/yui/yui-min.js"></script>
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala<!--begin custom header content for this example-->
af0732a2bf24fbea12a085b855224577e7101851kiirala<style type="text/css">
af0732a2bf24fbea12a085b855224577e7101851kiirala/* Overlay Look/Feel */
af0732a2bf24fbea12a085b855224577e7101851kiirala.yui-overlay-content {
af0732a2bf24fbea12a085b855224577e7101851kiirala padding:2px;
af0732a2bf24fbea12a085b855224577e7101851kiirala border:1px solid #000;
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz background-color:#aaa;
af0732a2bf24fbea12a085b855224577e7101851kiirala font-size:93%;
af0732a2bf24fbea12a085b855224577e7101851kiirala width: 10em;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz.yui-overlay-content .yui-widget-hd {
af0732a2bf24fbea12a085b855224577e7101851kiirala font-weight:bold;
af0732a2bf24fbea12a085b855224577e7101851kiirala text-align:center;
af0732a2bf24fbea12a085b855224577e7101851kiirala padding:2px;
af0732a2bf24fbea12a085b855224577e7101851kiirala border:2px solid #aa0000;
af0732a2bf24fbea12a085b855224577e7101851kiirala background-color:#fff;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala.yui-overlay-content .yui-widget-bd {
af0732a2bf24fbea12a085b855224577e7101851kiirala text-align:left;
af0732a2bf24fbea12a085b855224577e7101851kiirala height: 5em;
af0732a2bf24fbea12a085b855224577e7101851kiirala padding:2px;
af0732a2bf24fbea12a085b855224577e7101851kiirala border:2px solid #0000aa;
af0732a2bf24fbea12a085b855224577e7101851kiirala background-color:#fff;
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala/* Example Layout CSS */
af0732a2bf24fbea12a085b855224577e7101851kiirala#overlay-align {
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz border: 1px solid green;
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala.overlay-example {
af0732a2bf24fbea12a085b855224577e7101851kiirala position:relative;
af0732a2bf24fbea12a085b855224577e7101851kiirala border:1px solid #000;
af0732a2bf24fbea12a085b855224577e7101851kiirala background-color:#eee;
af0732a2bf24fbea12a085b855224577e7101851kiirala padding:5px;
af0732a2bf24fbea12a085b855224577e7101851kiirala height:25em;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala.overlay-example button {
af0732a2bf24fbea12a085b855224577e7101851kiirala margin-left:1px;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz.overlay-example .filler {
af0732a2bf24fbea12a085b855224577e7101851kiirala color:#999;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz.align-box {
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz height:12em;
af0732a2bf24fbea12a085b855224577e7101851kiirala width:12em;
af0732a2bf24fbea12a085b855224577e7101851kiirala border:1px solid #000;
af0732a2bf24fbea12a085b855224577e7101851kiirala margin:0px;
af0732a2bf24fbea12a085b855224577e7101851kiirala text-align:center;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala.align-box .title {
af0732a2bf24fbea12a085b855224577e7101851kiirala font-weight:bold;
af0732a2bf24fbea12a085b855224577e7101851kiirala color:#fff;
af0732a2bf24fbea12a085b855224577e7101851kiirala padding:2px;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala#align1 {
af0732a2bf24fbea12a085b855224577e7101851kiirala position:static;
af0732a2bf24fbea12a085b855224577e7101851kiirala background-color:#0000cc;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala#align2 {
af0732a2bf24fbea12a085b855224577e7101851kiirala position:relative;
af0732a2bf24fbea12a085b855224577e7101851kiirala top:-130px;
af0732a2bf24fbea12a085b855224577e7101851kiirala left:250px;
af0732a2bf24fbea12a085b855224577e7101851kiirala background-color:#00cc00;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala#align3 {
af0732a2bf24fbea12a085b855224577e7101851kiirala position:absolute;
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz bottom:130px;
af0732a2bf24fbea12a085b855224577e7101851kiirala right:20px;
af0732a2bf24fbea12a085b855224577e7101851kiirala background-color:#cc0000;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala#alignment {
af0732a2bf24fbea12a085b855224577e7101851kiirala padding:5px;
af0732a2bf24fbea12a085b855224577e7101851kiirala display:inline;
af0732a2bf24fbea12a085b855224577e7101851kiirala background-color:#fff;
af0732a2bf24fbea12a085b855224577e7101851kiirala border:1px solid black;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala
05f0aa763684e19a10da045d998967d34bb6afc1kiirala#step {
af0732a2bf24fbea12a085b855224577e7101851kiirala font-size:85%;
af0732a2bf24fbea12a085b855224577e7101851kiirala margin-left:5px;
af0732a2bf24fbea12a085b855224577e7101851kiirala}
af0732a2bf24fbea12a085b855224577e7101851kiirala</style>
af0732a2bf24fbea12a085b855224577e7101851kiirala<!--end custom header content for this example-->
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala</head>
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala<body class=" yui-skin-sam">
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala<h1>Extended XY Positioning</h1>
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala<div class="exampleIntro">
af0732a2bf24fbea12a085b855224577e7101851kiirala 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.
af0732a2bf24fbea12a085b855224577e7101851kiirala
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz</div>
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala<div id="demo">
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala</div>
d9a7c806ee7f408ddb61ff4f233c9d96111ee2b5johanengelen<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala<div class="overlay-example" id="overlay-align">
d9a7c806ee7f408ddb61ff4f233c9d96111ee2b5johanengelen <p><pre id="alignment"></pre><span id="step"></span></p>
d9a7c806ee7f408ddb61ff4f233c9d96111ee2b5johanengelen <p><button type="button" id="align">Next Alignment</button></p>
af0732a2bf24fbea12a085b855224577e7101851kiirala <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>
af0732a2bf24fbea12a085b855224577e7101851kiirala <form id="test-bleed">
af0732a2bf24fbea12a085b855224577e7101851kiirala <select><option>foo</option></select>
af0732a2bf24fbea12a085b855224577e7101851kiirala </form>
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz <div id="align1" class="align-box"><span class="title">id = #align1</span></div>
af0732a2bf24fbea12a085b855224577e7101851kiirala <div id="align2" class="align-box"><span class="title">id = #align2</span></div>
af0732a2bf24fbea12a085b855224577e7101851kiirala <div id="align3" class="align-box"><span class="title">id = #align3</span></div>
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala <div class="yui-overlay-content yui-widget-stdmod">
af0732a2bf24fbea12a085b855224577e7101851kiirala <div class="yui-widget-hd">Aligned Overlay</div>
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz <div class="yui-widget-bd">Click the 'Align Next' button to try a new alignment</div>
af0732a2bf24fbea12a085b855224577e7101851kiirala </div>
af0732a2bf24fbea12a085b855224577e7101851kiirala</div>
4afe6ce6ad98c33cff42076097036e7327f32cebjoncruz
af0732a2bf24fbea12a085b855224577e7101851kiirala<script type="text/javascript">
af0732a2bf24fbea12a085b855224577e7101851kiiralaYUI().use("node", "align-plugin", "shim-plugin", function(Y) {
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala var alignment = Y.one("#alignment"),
af0732a2bf24fbea12a085b855224577e7101851kiirala stepNumber = Y.one("#step"),
af0732a2bf24fbea12a085b855224577e7101851kiirala ie = Y.UA.ie,
af0732a2bf24fbea12a085b855224577e7101851kiirala ie6 = ie && ie < 7,
af0732a2bf24fbea12a085b855224577e7101851kiirala useShim = (ie6 || (ie && document.compatMode === 'backCompat')),
af0732a2bf24fbea12a085b855224577e7101851kiirala node = Y.one("#overlay-align .yui-overlay-content")
af0732a2bf24fbea12a085b855224577e7101851kiirala .plug(Y.Plugin.Align);
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala if (useShim) {
af0732a2bf24fbea12a085b855224577e7101851kiirala node.plug(Y.Plugin.Shim);
af0732a2bf24fbea12a085b855224577e7101851kiirala }
af0732a2bf24fbea12a085b855224577e7101851kiirala
af0732a2bf24fbea12a085b855224577e7101851kiirala var steps = [
af0732a2bf24fbea12a085b855224577e7101851kiirala function() {
af0732a2bf24fbea12a085b855224577e7101851kiirala /* Center in #overlay-align */
af0732a2bf24fbea12a085b855224577e7101851kiirala node.align.center('#overlay-align');
af0732a2bf24fbea12a085b855224577e7101851kiirala alignment.setContent("node.align.center('#overlay-align'))");
af0732a2bf24fbea12a085b855224577e7101851kiirala },
af0732a2bf24fbea12a085b855224577e7101851kiirala function() {
af0732a2bf24fbea12a085b855224577e7101851kiirala /* Align top-left corner of overlay, with top-right corner of #align1 */
af0732a2bf24fbea12a085b855224577e7101851kiirala node.align.to('#align1', 'tr');
af0732a2bf24fbea12a085b855224577e7101851kiirala alignment.setContent("node.align.to(Y.one('#align1'), 'tr')");
af0732a2bf24fbea12a085b855224577e7101851kiirala },
function() {
/* Center overlay in #align2 */
node.align.center('#align2');
alignment.setContent("node.align.center('#align2')");
},
function() {
/* Align right-center edge of overlay with right-center edge of viewport */
node.align.to('window', 'rc', 'rc');
alignment.setContent("node.align.to('window', 'rc', 'rc')");
},
function() {
/* Align right-center edge of overlay with right-center edge of viewport
and fix position */
node.align.to('window', 'rc', 'rc', true);
alignment.setContent("node.align.to('window', 'rc', 'rc', true)" +
" (fixed position)");
},
function() {
/* Center overlay in viewport */
node.align.center('window');
alignment.setContent("node.align.center('window')");
},
function() {
/* Center overlay in viewport and fix position */
node.align.center('window', true);
alignment.setContent("node.align.center('window', true)" +
" (fixed position)");
},
function() {
/* Align top-center edge of overlay with bottom-center edge of #align3 */
node.align.to('#align3', 'bc', 'tc');
alignment.setContent("node.align.to('#align3'), 'bc', 'tc')");
}
];
var step = 0;
var totalSteps = steps.length;
function alignNext() {
stepNumber.setContent("Alignment " + (step+1) + " of " + totalSteps);
steps[step]();
step = (++step)%(totalSteps);
}
alignNext();
Y.on("click", alignNext, "#align");
});
</script>
</body>
</html>