YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Dom Collection: Using setXY

# Dom Collection: Using setXY

Clicking the document will use Dom's `setXY` method to position the element to the click point.

View example in new window.

## Using setXY

`setXY`, part of the YUI Dom Collection, makes it easy to position an element relative to the document.

To illustrate the use of `setXY`, we'll create a single `<div>` called `foo` that positions itself to the cursor when the document is clicked.

Add some simple CSS rules and markup for the demo element and a button to activate the demo:

<style type="text/css"> #foo { background-color:#00f; height:10px; width:10px; } </style> <div id="foo"></div> <button id="demo-run">run</button>

Now we will define the function that moves the element based on the position of the click. The first argument of the `setXY` method is either the ID of an HTMLElement, or an actual HTMLElement object. The second argument is 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 Event Utility provides a `getXY` method that accepts an event object as an argument, and returns the position of the cursor at the time of the click. The returned position is an array in the same format as the `setXY` array, so it can be fed directly to the `setXY` method.

<script type="text/javascript"> var move = function(e) { YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e)); }; </script>

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

<script type="text/javascript"> YAHOO.util.Event.on('demo-run', 'click', move); </script>

This is a simple example of how to use the `YAHOO.util.Dom.setXY` 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, and `offsetParent` (any positioned ancestor), or other factors that may affect it, `setXY` will ensure the final position is accurate in document coordinates (e.g. `[0, 0]` will be the upper left corner of the document).

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Dom Collection Examples:

- Using setXY
- Using getXY
- Using setStyle
- Using getStyle
- Using hasClass
- Using addClass
- Using removeClass
- Using getElementsByClassName
- Exploring the Dom Collection's API

### More Dom Collection Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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