YUI 3.x Home -

YUI Library Examples: Node: Node Positioning

Node: Node Positioning

This example shows how to position an element based on the document XY coordinate system.

Setting up the HTML

First we need some HTML to work with.

  1. <span id="demo"></span>
<span id="demo"></span>

Getting the Dimensions

In this example, we will listen for clicks on the document and update the position of our demo node to match the click position.

  1. var onClick = function(e) {
  2. Y.one('#demo').setXY([e.pageX, e.pageY]);
  3. };
var onClick = function(e) {
    Y.one('#demo').setXY([e.pageX, e.pageY]);
};

The last step is to assign the click handler to the document to capture all click events.

  1. Y.one('document').on('click', onClick);
Y.one('document').on('click', onClick);

Full Script Source

  1. YUI().use('node', function(Y) {
  2. var onClick = function(e) {
  3. Y.one('#demo').setXY([e.pageX, e.pageY]);
  4. };
  5.  
  6. Y.one('document').on('click', onClick);
  7. });
YUI().use('node', function(Y) {
    var onClick = function(e) {
        Y.one('#demo').setXY([e.pageX, e.pageY]);
    };
 
    Y.one('document').on('click', onClick);
});

Copyright © 2009 Yahoo! Inc. All rights reserved.

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