YUI Library Examples: Dom Collection: Using getXY

Using getXY

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

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:


1	<style type="text/css">
2	#foo {
3	background-color:#00f;
4	height:10px;
5	width:10px;
6	}
7	#bar {
8	background-color:#f00;
9	height:100px;
10	width:100px;
11	margin:0 100px 1em;
12	}
13	</style>
14
15	<div id="foo"></div>
16	<div id="bar"></div>
17	<button id="demo-run">run</button>
	view plain \| print \| ?

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.


1	<script type="text/javascript">
2	var move = function() {
3	var xy = YAHOO.util.Dom.getXY('bar');
4	YAHOO.util.Dom.setXY('foo', xy);
5	};
6	</script>
	view plain \| print \| ?

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


1	YAHOO.util.Event.on('demo-run', 'click', move);
	view plain \| print \| ?

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:

Logger Console

INFO1016ms (+0) 7:15:38 AM:
Dom
isAncestor returning true

INFO1016ms (+0) 7:15:38 AM:
Dom
addClass adding yui-link-button

INFO1016ms (+0) 7:15:38 AM:
Dom
hasClass returning false

INFO1016ms (+0) 7:15:38 AM:
Dom
addClass adding yui-button

INFO1016ms (+2) 7:15:38 AM:
Dom
hasClass returning false

INFO1014ms (+0) 7:15:38 AM:
Dom
getElementsBy returning

INFO1014ms (+0) 7:15:38 AM:
Dom
setStyle setting visibility to visible

INFO1014ms (+5) 7:15:38 AM:
Dom
setStyle setting height to auto

INFO1009ms (+18) 7:15:38 AM:
LogReader  instance0
LogReader initialized

INFO991ms (+0) 7:15:38 AM:
Dom
addClass adding yui-log

INFO991ms (+989) 7:15:38 AM:
Dom
hasClass returning false

INFO2ms (+2) 7:15:37 AM:

example

The example has finished loading; as you interact with it, you'll see log messages appearing here.

INFO0ms (+0) 7:15:37 AM:
global
Logger initialized

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

Reload with logging
and debugging disabled.

YUI Library Examples: Dom Collection: Using getXY

Using getXY

YUI Logger Output:

Logger Console

Dom Collection Examples:

More Dom Collection Resources: