Element Visibility

The hideElement and showElement functions are provided as a convenience, but only work for elements that are display: block. For a general solution to showing, hiding, and checking the explicit visibility of elements, we recommend using a solution that involves a little CSS. Here's an example:

<style type="text/css">
    .invisible { display: none; }
</style>

<script type="text/javascript">
    function toggleVisible(elem) {
        toggleElementClass("invisible", elem);
    }

    function makeVisible(elem) {
        removeElementClass(elem, "invisible");
    }

    function makeInvisible(elem) {
        addElementClass(elem, "invisible");
    }

    function isVisible(elem) {
        // you may also want to check for
        // getElement(elem).style.display == "none"
        return !hasElementClass(elem, "invisible");
    };
</script>

MochiKit doesn't ship with such a solution, because there is no reliable and portable method for adding CSS rules on the fly with JavaScript.

Functions

getStyle(element, cssSelector):

Looks up a CSS property for the given element. The element can be specified as either a string with the element's ID or the element object itself.

cssSelector:

The CSS selector, e.g. background-color.

Availability:

Available in MochiKit 1.4+

setStyle(element, styles):

Set CSS properties on a the given element. The element can be specified as either a string with the element's ID or the element object itself.

styles:

Dictionnary holding CSS properties to set, e.g. {'background-color': 'red', 'opacity': 0.5}.

Availability:

Available in MochiKit 1.4+

setOpacity(element, opacity):

Sets opacity for element. Valid opacity values range from 0 (invisible) to 1 (opaque). element is looked up with getElement, so string identifiers are also acceptable.

Availability:

Available in MochiKit 1.4+

getElementDimensions(element):

Return the absolute pixel width and height (including padding and border, but not margins) of element as an object with w and h properties, or undefined if element is not in the document. element may be specified as a string to be looked up with getElement, a DOM element, or trivially as an object with w and/or h properties.

Availability:

Available in MochiKit 1.4+

setElementDimensions(element, dimensions[, units='px']):

Sets the dimensions of element in the document from an object with w and h properties.

Warning: IE in quirks-mode seems to behave strange when you set the height off an element containing text to 0. You can workaround this by setting the value of visibly/display.

element:

A reference to the DOM element to update (if a string is given, getElement(node) will be used to locate the node)

dimensions:

An object with w and h properties. You can also specify only one property.

units:

Optionally set the units to use, default is px

Availability:

Available in MochiKit 1.4+

getElementPosition(element[, relativeTo={x: 0, y: 0}]):

Return the absolute pixel position of element in the document as an object with x and y properties, or undefined if element is not in the document. element may be specified as a string to be looked up with getElement, a DOM element, or trivially as an object with x and/or y properties.

If relativeTo is given, then its coordinates are subtracted from the absolute position of element, e.g.:

var elemPos = getElementPosition(elem);
var anotherElemPos = getElementPosition(anotherElem);
var relPos = getElementPosition(elem, anotherElem);
assert( relPos.x == (elemPos.x - anotherElemPos.x) );
assert( relPos.y == (elemPos.y - anotherElemPos.y) );

relativeTo may be specified as a string to be looked up with getElement, a DOM element, or trivially as an object with x and/or y properties.

Availability:

Available in MochiKit 1.4+

setElementPosition(element, position[, units='px']):

Sets the absolute position of element in the document from an object with x and y properties.

element:

A reference to the DOM element to update (if a string is given, getElement(node) will be used to locate the node)

position:

An object with x and y properties. You can also specify only one property.

units:

Optionally set the units to use, default is px

Availability:

Available in MochiKit 1.4+

setDisplayForElement(display, element[, ...]):

Change the style.display for the given element(s). Usually used as the partial forms:

• showElement(element, ...)
• hideElement(element, ...)

Elements are looked up with getElement, so string identifiers are acceptable.

For information about the caveats of using a style.display based show/hide mechanism, and a CSS based alternative, see Element Visibility.

Availability:

Available in MochiKit 1.4+

showElement(element, ...):

Partial form of setDisplayForElement, specifically:

partial(setDisplayForElement, "block")

For information about the caveats of using a style.display based show/hide mechanism, and a CSS based alternative, see Element Visibility.

Availability:

Available in MochiKit 1.4+

hideElement(element, ...):

Partial form of setDisplayForElement, specifically:

partial(setDisplayForElement, "none")

For information about the caveats of using a style.display based show/hide mechanism, and a CSS based alternative, see Element Visibility.

Availability:

Available in MochiKit 1.4+

getViewportDimensions():

Return the pixel width and height of the viewport as an object with w and h properties.

Availability:

Available in MochiKit 1.4+

getViewportPosition():

Return the pixel position of the viewport inside the window, as a Coordinates object.

Availability:

Available in MochiKit 1.4+

Objects

Coordinates(x, y):

Constructs an object with x and y properties. obj.toString() returns something like {x: 0, y: 42} for debugging.

Availability:

Available in MochiKit 1.4+

Dimensions(w, h):

Constructs an object with w and h properties. obj.toString() returns something like {w: 0, h: 42} for debugging.

Availability:

Available in MochiKit 1.4+