<p>
In CSS, elements are positioned using
offsets. The measurement used is the amount of offset from the top-left corner of an element’s parent.
</p>
<p>offsetParent: Theoretically, this is the parent that an element is positioned within. However,
in practice, the element that offsetParent refers to depends on the browser (for
example, in Firefox it refers to the root node, and in Opera, the immediate parent). </p>
<p>
offsetLeft and offsetTop: These parameters are the horizontal and vertical offsets of the
element within the context of the offsetParent. Thankfully, this is always accurate in
modern browsers.
</p>
<p>
Two Helper Functions for Determining the x and y Locations of an Element Relative
to the Entire Document
</p>
<pre data-sub="prettyprint:_">
// Find the X (Horizontal, Left) position of an element
function pageX(elem)
{
// See if we're at the root element, or not
return elem.offsetParent ?
// If we can still go up, add the current offset and recurse upwards
elem.offsetLeft + pageX( elem.offsetParent ) :
// Otherwise, just get the current offset
elem.offsetLeft;
}
// Find the Y (Vertical, Top) position of an element
function pageY(elem)
{
// See if we're at the root element, or not
return elem.offsetParent ?
// If we can still go up, add the current offset and recurse upwards
elem.offsetTop + pageY( elem.offsetParent ) :
// Otherwise, just get the current offset
elem.offsetTop;
}
</pre>
<p>
Two Functions for Determining the Position of an Element Relative to Its
Parent Element. (parent element is not necessary its offsetParent)
</p>
<pre data-sub="prettyprint:_">
// Find the horizontal positioing of an element within its parent
function parentX(elem) {
// If the offsetParent is the element's parent, break early
return elem.parentNode == elem.offsetParent ?
elem.offsetLeft :
// Otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageX( elem ) - pageX( elem.parentNode );
}
// Find the vertical positioning of an element within its parent
function parentY(elem) {
// If the offsetParent is the element's parent, break early
return elem.parentNode == elem.offsetParent ?
elem.offsetTop :
// Otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageY( elem ) - pageY( elem.parentNode );
}
</pre>
<p>
Helper Functions for Finding the CSS Positioning of an Element
</p>
<pre data-sub="prettyprint:_">
// Find the left position of an element
function posX(elem) {
// Get the computed style and get the number out of the value
return parseInt( getStyle( elem, "left" ) );
}
// Find the top position of an element
function posY(elem) {
// Get the computed style and get the number out of the value
return parseInt( getStyle( elem, "top" ) );
}
</pre>
<p>
A Pair of Functions for Setting the x and y Positions of an Element, Regardless of
Its Current Position
</p>
<pre data-sub="prettyprint:_">
// A function for setting the horizontal position of an element
function setX(elem, pos) {
// Set the 'left' CSS property, using pixel units
elem.style.left = pos + "px";
}
// A function for setting the vertical position of an element
function setY(elem, pos) {
// Set the 'left' CSS property, using pixel units
elem.style.top = pos + "px";
}
</pre>
<p>A Pair of Functions for Adjusting the Position of an Element Relative to Its
Current Position</p>
<pre data-sub="prettyprint:_">
// A function for adding a number of pixels to the horizontal
// position of an element
function addX(elem,pos) {
// Get the current horz. position and add the offset to it.
setX( posX(elem) + pos );
}
// A function that can be used to add a number of pixels to the
// vertical position of an element
function addY(elem,pos) {
// Get the current vertical position and add the offset to it
setY( posY(elem) + pos );
}
</pre>
<p>Two Functions for Retreiving the Current Height or Width of a DOM Element</p>
<pre data-sub="prettyprint:_">
// Get the actual height (using the computed CSS) of an element
function getHeight( elem ) {
// Gets the computed CSS value and parses out a usable number
return parseInt( getStyle( elem, 'height' ) );
}
// Get the actual width (using the computed CSS) of an element
function getWidth( elem ) {
// Gets the computed CSS value and parses out a usable number
return parseInt( getStyle( elem, 'width' ) );
}
</pre>
<p>Two Functions for Finding the Full Potential Height or Width of an Element,
Even If the Element Is Hidden</p>
<pre data-sub="prettyprint:_">
// Find the full, possible, height of an element (not the actual,
// current, height)
function fullHeight( elem ) {
// If the element is being displayed, then offsetHeight
// should do the trick, barring that, getHeight() will work
if ( getStyle( elem, "display" ) != "none" )
return elem.offsetHeight || getHeight( elem );
// Otherwise, we have to deal with an element with a display
// of none, so we need to reset its CSS properties to get a more
// accurate reading
var old = resetCSS( elem, {
display: "",
visibility: "hidden",
position: "absolute"
});
// Figure out what the full height of the element is, using clientHeight
// and if that doesn"t work, use getHeight
var h = elem.clientHeight || getHeight( elem );
// Finally, restore the CSS properties back to what they were
restoreCSS( elem, old );
// and return the full height of the element
return h;
}
// Find the full, possible, width of an element (not the actual,
// current, width)
function fullWidth( elem ) {
// If the element is being displayed, then offsetWidth
// should do the trick, barring that, getWidth() will work
if ( getStyle( elem, "display" ) != "none" )
return elem.offsetWidth || getWidth( elem );
// Otherwise, we have to deal with an element with a display
// of none, so we need to reset its CSS properties to get a more
// accurate reading
var old = resetCSS( elem, {
display: "",
visibility: "hidden",
position: "absolute"
});
// Figure out what the full width of the element is, using clientWidth
// and if that doesn"t work, use getWidth
var w = elem.clientWidth || getWidth( elem );
// Finally, restore the CSS properties back to what they were
restoreCSS( elem, old );
// and return the full width of the element
return w;
}
// A function used for setting a set of CSS properties, which
// can then be restored back again later
function resetCSS( elem, prop ) {
var old = {};
// Go through each of the properties
for ( var i in prop ) {
// Remember the old property value
old[ i ] = elem.style[ i ];
// And set the new value
elem.style[ i ] = prop[i];
}
// Retun the set of changed values, to be used by restoreCSS
return old;
}
// A function for restoring the side effects of the resetCSS function
function restoreCSS( elem, prop ) {
// Reset all the properties back to their original values
for ( var i in prop )
elem.style[ i ] = prop[ i ];
}
</pre>
<p>
A Set of Functions for Toggling the Visibility of an Element Using Its CSS
Display Property.</p>
<pre data-sub="prettyprint:_">
// A function for hiding (using display) an element
function hide( elem ) {
// Find out what it"s current display state is
var curDisplay = getStyle( elem, "display" );
// Remember its display state for later
if ( curDisplay != "none" )
elem.$oldDisplay = curDisplay;
// Set the display to none (hiding the element)
elem.style.display = "none";
}
// A function for showing (using display) an element
function show( elem ) {
// Set the display property back to what it use to be, or use
// "block", if no previous display had been saved
elem.style.display = elem.$oldDisplay || "block";
}
</pre>
<p>A Function for Adjusting the Opacity Level of an Element.</p>
<pre data-sub="prettyprint:_">
// Set an opacity level for an element
// (where level is a number 0-100)
function setOpacity( elem, level ) {
// If filters exist, then this is IE, so set the Alpha filter
if ( elem.filters )
elem.filters.alpha.opacity = level;
// Otherwise use the W3C opacity property
else
elem.style.opacity = level / 100;
}
</pre>