sandbox/node/node-align.html

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