4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
422 lines
17 KiB
HTML
422 lines
17 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<title>
|
|
JavaScript Documentation -
|
|
|
|
Dom.js
|
|
|
|
</title>
|
|
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="header">
|
|
<h1>JavaScript Documentation</h1>
|
|
<h3><a href="./index.html">DOM Utility</a></h3>
|
|
|
|
<div class="breadcrumbs">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="./index.html">DOM Utility</a>
|
|
>
|
|
<strong>Dom.js</strong>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="body">
|
|
|
|
|
|
<div class="nav">
|
|
<div class="module resources">
|
|
<ul class="content">
|
|
<li><a href="overview-tree.html">Tree View</a></li>
|
|
<li><a href="index-all.html">Element Index</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="module">
|
|
<h4><a href="./allclasses-noframe.html">Classes</a></h4>
|
|
<ul class="content">
|
|
|
|
|
|
|
|
<li>
|
|
<a href="YAHOO.util.Dom.html">
|
|
YAHOO.util.Dom</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.util.Point.html">
|
|
YAHOO.util.Point</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.util.Region.html">
|
|
YAHOO.util.Region</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="module">
|
|
<h4><a href="./overview-summary.html">Files</a></h4>
|
|
<ul class="content">
|
|
|
|
<li>
|
|
<a href="overview-summary-Dom.js.html">
|
|
Dom.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Region.js.html">
|
|
Region.js</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="main">
|
|
|
|
|
|
|
|
|
|
<h2>Dom.js</h2>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="section source">
|
|
<h3><a name="source">Souce Code</a> <span class="top">[<a href="#top">top</a>]</span></h3>
|
|
<pre class="sourceview"><span class="comment">/**
|
|
* <span class="attrib">@class</span> Provides helper methods for DOM elements.
|
|
*/</span>
|
|
YAHOO.util.Dom = new <span class="reserved">function</span>() {
|
|
|
|
<span class="comment">/**
|
|
* Returns an HTMLElement reference
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
* <span class="attrib">@return</span> {HTMLElement} A DOM reference to an HTML element.
|
|
*/</span>
|
|
<span class="reserved">this</span>.get = <span class="reserved">function</span>(el) {
|
|
<span class="reserved">if</span> (typeof el == <span class="literal">'string'</span>) { <span class="comment">// accept object or id</span>
|
|
el = document.getElementById(el);
|
|
}
|
|
|
|
<span class="reserved">return</span> el;
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Normalizes currentStyle and ComputedStyle.
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
* <span class="attrib">@param</span> {String} property The style property whose value is returned.
|
|
* <span class="attrib">@return</span> {String} The current value of the style property.
|
|
*/</span>
|
|
<span class="reserved">this</span>.getStyle = <span class="reserved">function</span>(el, property) {
|
|
var value = null;
|
|
var dv = document.defaultView;
|
|
|
|
el = <span class="reserved">this</span>.get(el);
|
|
|
|
<span class="reserved">if</span> (property == <span class="literal">'opacity'</span> && el.filters) {<span class="comment">// IE opacity</span>
|
|
value = 1;
|
|
try {
|
|
value = el.filters.item(<span class="literal">'DXImageTransform.Microsoft.Alpha'</span>).opacity / 100;
|
|
} catch(e) {
|
|
try {
|
|
value = el.filters.item(<span class="literal">'alpha'</span>).opacity / 100;
|
|
} catch(e) {}
|
|
}
|
|
}
|
|
<span class="reserved">else</span> <span class="reserved">if</span> (el.style[property]) {
|
|
value = el.style[property];
|
|
}
|
|
<span class="reserved">else</span> <span class="reserved">if</span> (el.currentStyle && el.currentStyle[property]) {
|
|
value = el.currentStyle[property];
|
|
}
|
|
<span class="reserved">else</span> <span class="reserved">if</span> ( dv && dv.getComputedStyle )
|
|
{ <span class="comment">// convert camelCase to hyphen-case</span>
|
|
|
|
var converted = <span class="literal">''</span>;
|
|
<span class="reserved">for</span>(i = 0, len = property.length;i < len; ++i) {
|
|
<span class="reserved">if</span> (property.charAt(i) == property.charAt(i).toUpperCase()) {
|
|
converted = converted + <span class="literal">'-'</span> + property.charAt(i).toLowerCase();
|
|
} <span class="reserved">else</span> {
|
|
converted = converted + property.charAt(i);
|
|
}
|
|
}
|
|
|
|
<span class="reserved">if</span> (dv.getComputedStyle(el, <span class="literal">''</span>).getPropertyValue(converted)) {
|
|
value = dv.getComputedStyle(el, <span class="literal">''</span>).getPropertyValue(converted);
|
|
}
|
|
}
|
|
|
|
<span class="reserved">return</span> value;
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Wrapper for setting style properties of HTMLElements. Normalizes "opacity" across modern browsers.
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
* <span class="attrib">@param</span> {String} property The style property to be set.
|
|
* <span class="attrib">@param</span> {String} val The value to apply to the given property.
|
|
*/</span>
|
|
<span class="reserved">this</span>.setStyle = <span class="reserved">function</span>(el, property, val) {
|
|
el = <span class="reserved">this</span>.get(el);
|
|
switch(property) {
|
|
case <span class="literal">'opacity'</span> :
|
|
<span class="reserved">if</span> (el.filters) {
|
|
el.style.filter = <span class="literal">'alpha(opacity='</span> + val * 100 + <span class="literal">')'</span>;
|
|
|
|
<span class="reserved">if</span> (!el.currentStyle.hasLayout) {
|
|
el.style.zoom = 1;
|
|
}
|
|
} <span class="reserved">else</span> {
|
|
el.style.opacity = val;
|
|
el.style[<span class="literal">'-moz-opacity'</span>] = val;
|
|
el.style[<span class="literal">'-khtml-opacity'</span>] = val;
|
|
}
|
|
break;
|
|
default :
|
|
el.style[property] = val;
|
|
}
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Gets the current position of an element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
*/</span>
|
|
<span class="reserved">this</span>.getXY = <span class="reserved">function</span>(el) {
|
|
el = <span class="reserved">this</span>.get(el);
|
|
|
|
<span class="comment">// has to be part of document to have pageXY</span>
|
|
<span class="reserved">if</span> (el.parentNode === null || <span class="reserved">this</span>.getStyle(el, <span class="literal">'display'</span>) == <span class="literal">'none'</span>) {
|
|
<span class="reserved">return</span> false;
|
|
}
|
|
|
|
<span class="comment">/**
|
|
* Position of the html element (x, y)
|
|
* <span class="attrib">@private</span>
|
|
* <span class="attrib">@type</span> Array
|
|
*/</span>
|
|
var parent = null;
|
|
var pos = [];
|
|
var box;
|
|
|
|
<span class="reserved">if</span> (el.getBoundingClientRect) { <span class="comment">// IE</span>
|
|
box = el.getBoundingClientRect();
|
|
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
|
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
|
|
|
|
<span class="reserved">return</span> [box.left + scrollLeft, box.top + scrollTop];
|
|
}
|
|
<span class="reserved">else</span> <span class="reserved">if</span> (document.getBoxObjectFor) { <span class="comment">// gecko</span>
|
|
box = document.getBoxObjectFor(el);
|
|
pos = [box.x, box.y];
|
|
}
|
|
<span class="reserved">else</span> { <span class="comment">// safari/opera</span>
|
|
pos = [el.offsetLeft, el.offsetTop];
|
|
parent = el.offsetParent;
|
|
<span class="reserved">if</span> (parent != el) {
|
|
<span class="reserved">while</span> (parent) {
|
|
pos[0] += parent.offsetLeft;
|
|
pos[1] += parent.offsetTop;
|
|
parent = parent.offsetParent;
|
|
}
|
|
}
|
|
|
|
<span class="comment">// opera & (safari absolute) incorrectly account for body offsetTop</span>
|
|
var ua = navigator.userAgent.toLowerCase();
|
|
<span class="reserved">if</span> (
|
|
ua.indexOf(<span class="literal">'opera'</span>) != -1
|
|
|| ( ua.indexOf(<span class="literal">'safari'</span>) != -1 && <span class="reserved">this</span>.getStyle(el, <span class="literal">'position'</span>) == <span class="literal">'absolute'</span> )
|
|
) {
|
|
pos[1] -= document.body.offsetTop;
|
|
}
|
|
}
|
|
|
|
<span class="reserved">if</span> (el.parentNode) { parent = el.parentNode; }
|
|
<span class="reserved">else</span> { parent = null; }
|
|
|
|
<span class="reserved">while</span> (parent && parent.tagName != <span class="literal">'BODY'</span> && parent.tagName != <span class="literal">'HTML'</span>) {
|
|
pos[0] -= parent.scrollLeft;
|
|
pos[1] -= parent.scrollTop;
|
|
|
|
<span class="reserved">if</span> (parent.parentNode) { parent = parent.parentNode; }
|
|
<span class="reserved">else</span> { parent = null; }
|
|
}
|
|
|
|
<span class="reserved">return</span> pos;
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Gets the current X position of an element based on page coordinates. The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
*/</span>
|
|
<span class="reserved">this</span>.getX = <span class="reserved">function</span>(el) {
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.getXY(el)[0];
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Gets the current Y position of an element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
*/</span>
|
|
<span class="reserved">this</span>.getY = <span class="reserved">function</span>(el) {
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.getXY(el)[1];
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Set the position of an html element in page coordinates, regardless of how the element is positioned.
|
|
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
* <span class="attrib">@param</span> {array} pos Contains X & Y values for new position (coordinates are page-based)
|
|
*/</span>
|
|
<span class="reserved">this</span>.setXY = <span class="reserved">function</span>(el, pos, noRetry) {
|
|
el = <span class="reserved">this</span>.get(el);
|
|
var pageXY = YAHOO.util.Dom.getXY(el);
|
|
<span class="reserved">if</span> (pageXY === false) { <span class="reserved">return</span> false; } <span class="comment">// has to be part of doc to have pageXY</span>
|
|
|
|
<span class="comment">//debug(el.offsetWidth);</span>
|
|
var delta = [
|
|
parseInt( YAHOO.util.Dom.getStyle(el, <span class="literal">'left'</span>), 10 ),
|
|
parseInt( YAHOO.util.Dom.getStyle(el, <span class="literal">'top'</span>), 10 )
|
|
];
|
|
|
|
<span class="reserved">if</span> ( isNaN(delta[0]) ) { delta[0] = 0; } <span class="comment">// defalts to 'auto'</span>
|
|
<span class="reserved">if</span> ( isNaN(delta[1]) ) { delta[1] = 0; }
|
|
|
|
<span class="reserved">if</span> (pos[0] !== null) { el.style.left = pos[0] - pageXY[0] + delta[0] + <span class="literal">'px'</span>; }
|
|
<span class="reserved">if</span> (pos[1] !== null) { el.style.top = pos[1] - pageXY[1] + delta[1] + <span class="literal">'px'</span>; }
|
|
|
|
var newXY = <span class="reserved">this</span>.getXY(el);
|
|
|
|
<span class="comment">// if retry is true, try one more time if we miss</span>
|
|
<span class="reserved">if</span> (!noRetry && (newXY[0] != pos[0] || newXY[1] != pos[1]) ) {
|
|
<span class="reserved">this</span>.setXY(el, pos, true);
|
|
}
|
|
|
|
<span class="reserved">return</span> true;
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Set the X position of an html element in page coordinates, regardless of how the element is positioned.
|
|
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
* <span class="attrib">@param</span> {Int} x to use as the X coordinate.
|
|
*/</span>
|
|
<span class="reserved">this</span>.setX = <span class="reserved">function</span>(el, x) {
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.setXY(el, [x, null]);
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Set the Y position of an html element in page coordinates, regardless of how the element is positioned.
|
|
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
* <span class="attrib">@param</span> {Int} Value to use as the Y coordinate.
|
|
*/</span>
|
|
<span class="reserved">this</span>.setY = <span class="reserved">function</span>(el, y) {
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.setXY(el, [null, y]);
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Returns the region position of the given element.
|
|
* The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
|
|
* <span class="attrib">@return</span> {Region} A Region instance containing "top, left, bottom, right" member data.
|
|
*/</span>
|
|
<span class="reserved">this</span>.getRegion = <span class="reserved">function</span>(el) {
|
|
el = <span class="reserved">this</span>.get(el);
|
|
<span class="reserved">return</span> new YAHOO.util.Region.getRegion(el);
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Returns the width of the client (viewport).
|
|
* <span class="attrib">@return</span> {Int} The width of the viewable area of the page.
|
|
*/</span>
|
|
<span class="reserved">this</span>.getClientWidth = <span class="reserved">function</span>() {
|
|
<span class="reserved">return</span> (
|
|
document.documentElement.offsetWidth
|
|
|| document.body.offsetWidth
|
|
);
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Returns the height of the client (viewport).
|
|
* <span class="attrib">@return</span> {Int} The height of the viewable area of the page.
|
|
*/</span>
|
|
<span class="reserved">this</span>.getClientHeight = <span class="reserved">function</span>() {
|
|
<span class="reserved">return</span> (
|
|
self.innerHeight
|
|
|| document.documentElement.clientHeight
|
|
|| document.body.clientHeight
|
|
);
|
|
};
|
|
};
|
|
</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="footer">
|
|
<hr />
|
|
Copyright © 2006 Yahoo! Inc. All rights reserved.
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|