YUI Library Examples: Dom Collection: Using getXY

Dom Collection: Using getXY

Clicking the button will use Dom's getXY method to get the position of the red element and pass it to the setXY method, which will move the blue element to that position.

Using getXY

getXY, part of the YUI Dom Collection, makes it easy to get an element's position relative to the document.

The first thing we need to do is load the Dom source file and dependencies:

To illustrate the use of getXY, we'll create a <div> called foo and a <div> called bar. When the document is clicked, foo will move to the top left corner of bar.

Start with some simple CSS rules, markup for the demo elements, and a button to trigger the demo:

Now we will define the function that moves foo to the xy position of bar. The only argument of the getXY method is either the ID of an HTMLElement, or an actual HTMLElement object. The getXY method returns an array containing two values: [x, y] where x is the distance from the left edge of the document, and y is the distance from the top edge of the document. The YUI Dom Collection provides a setXY that accepts an array in the same format.

Next we will use the YUI Event Utility's on method to listen for clicks on the button.

This is a simple example of how to use the YAHOO.util.Dom.getXY method. One of the powerful things about this is that regardless of what is influencing the element's position, be it positioning (absolute, relative, etc.), margins, an offsetParent (any positioned ancestor), or any other factors that may affect it, getXY will return a position in document coordinates (e.g. [0, 0] will be the upper left corner of the document).

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More Dom Collection Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

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