Clicking the document will use Dom's setXY
method to position the element to the click point.
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:
1 | <style type="text/css"> |
2 | #foo { |
3 | background-color:#00f; |
4 | height:10px; |
5 | width:10px; |
6 | } |
7 | </style> |
8 | |
9 | <div id="foo"></div> |
10 | <button id="demo-run">run</button> |
view plain | print | ? |
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.
1 | <script type="text/javascript"> |
2 | var move = function(e) { |
3 | YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e)); |
4 | }; |
5 | </script> |
view plain | print | ? |
Next we will use the YUI Event Utility's on
method to listen for clicks on the document.
1 | <script type="text/javascript"> |
2 | YAHOO.util.Event.on('demo-run', 'click', move); |
3 | </script> |
view plain | print | ? |
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).
INFO166ms (+0) 3:01:56 PM:Dom
isAncestor returning true
INFO166ms (+0) 3:01:56 PM:Dom
addClass adding yui-link-button
INFO166ms (+0) 3:01:56 PM:Dom
hasClass returning false
INFO166ms (+1) 3:01:56 PM:Dom
addClass adding yui-button
INFO165ms (+1) 3:01:56 PM:Dom
hasClass returning false
INFO164ms (+1) 3:01:56 PM:Dom
getElementsBy returning
INFO163ms (+0) 3:01:56 PM:Dom
setStyle setting visibility to visible
INFO163ms (+0) 3:01:56 PM:Dom
setStyle setting height to auto
INFO163ms (+18) 3:01:56 PM:LogReader instance0
LogReader initialized
INFO145ms (+0) 3:01:56 PM:Dom
addClass adding yui-log
INFO145ms (+29) 3:01:56 PM:Dom
hasClass returning false
INFO116ms (+115) 3:01:56 PM:example
The example has finished loading; as you interact with it, you'll see log messages appearing here.
INFO1ms (+1) 3:01:56 PM:global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings