YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: Node Positioning

## Node: Node Positioning

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

View example in new window.

### Setting up the HTML

First we need some HTML to work with.

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

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

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

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

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.

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

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

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

### Full Script Source

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

    YUI().use('node', function(Y) {
        var onClick = function(e) {
            Y.one('#demo').setXY([e.pageX, e.pageY]);
        };

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

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