Jul 3, 2007

Javascript and Postion

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.

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).

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.

Two Helper Functions for Determining the x and y Locations of an Element Relative to the Entire Document

            // 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;
            }
            

Two Functions for Determining the Position of an Element Relative to Its Parent Element. (parent element is not necessary its offsetParent)

            // 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 );
            }
            

Helper Functions for Finding the CSS Positioning of an Element

            // 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" ) );
            }
            

A Pair of Functions for Setting the x and y Positions of an Element, Regardless of Its Current Position

            // 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";
            }
            

A Pair of Functions for Adjusting the Position of an Element Relative to Its Current Position

            // 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 );
            }
            

Two Functions for Retreiving the Current Height or Width of a DOM Element

            // 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' ) );
            }
            

Two Functions for Finding the Full Potential Height or Width of an Element, Even If the Element Is Hidden

            // 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 ];
            }

            

A Set of Functions for Toggling the Visibility of an Element Using Its CSS Display Property.

            // 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";
            }
            

A Function for Adjusting the Opacity Level of an Element.

            // 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;
            }