There are no dedicated showcase example pages for the Uize.Dom.Util module.

SEARCH FOR EXAMPLES

Use the link below to search for example pages on the UIZE Web site that reference the Uize.Dom.Util module...

SEARCH

The Uize.Dom.Util module defines the Uize.Dom.Util package under the Uize.Dom namespace.

1.2.1. Features Introduced in This Module

1.2.2. Features Overridden in This Module

1.2.3. Features Inherited From Other Modules

1.2.4. Modules Directly Under This Namespace

1.2.5. Unit Tests

Returns a string, representing the effective background color for the specified node.

SYNTAX

styleBgColorSTR = Uize.Dom.Util.getEffectiveBgColor (nodeSTRorOBJ);

This method will ascend the parent hierarchy until a node is found whose background is not set to 'transparent' or 'none'. So, for example, if the specified node has its background set to 'none' but its parent node has its background set to '#fff', then this method will return the value '#fff'.

IMPLEMENTATION INFO

this feature was introduced in this module

Returns an object, being the CSS style properties necessary in order to achieve the specified degree of opacity.

SYNTAX

styleOpacityPropertiesOBJ = Uize.Dom.Util.getOpacityProperties (opacityFLOATorOBJ);

For standards compliant browsers, the returned object contains an "opacity" property, while for Internet Explorer it contains a "filter" property.

The returned object can be "stitched" into a style properties parameter, using the Uize.copyInto static method, in order to prepare a subsequent call to the Uize.Dom.Basics.setStyle static method, as follows...

EXAMPLE

Uize.Dom.Basics.setStyle (
  'someNodeId',
  Uize.copyInto (
    {
      display : 'block',
      position  :'absolute',
      visibility : 'inherit',
      top : '100px'
    },
    Uize.Dom.Util.getOpacityProperties (.5)
  )
);

NOTES

	the opacityFLOATorOBJ parameter can be an object that implements a valueOf interface (such as an instance of a Uize.Class subclass that implements the value state property)
	see also the Uize.Dom.Util.getOpacityStr static method

IMPLEMENTATION INFO

this feature was introduced in this module

Returns a string, representing the CSS style property corresponding to the specified opacity value.

SYNTAX

opacitySTR = Uize.Dom.Util.getOpacityStr (opacityFLOAT);

This method abstracts the difference between Microsoft Internet Explorer (that supports the proprietary alpha option for the filter style property) and browsers that support the W3C standard opacity style property. For example, the expression Uize.Dom.Util.getOpacityStr (.5) will produce the string 'filter:alpha(opacity=50);' for Internet Explorer, and the string 'opacity:0.5;' for all other browsers.

NOTES

see also the Uize.Dom.Util.getOpacityProperties static method

IMPLEMENTATION INFO

this feature was introduced in this module

Sets the value of the "cursor" style property of the specified node blob so that the node(s) appear either clickable or not, depending on the specified boolean value.

This method is useful for DOM nodes that need to be wired up with click actions by JavaScript code, but that don't have CSS selectors from the document applying the appropriate cursor style to them.

SYNTAX

Uize.Dom.Util.showClickable (nodeBLOB,clickableANYTYPE);

While typically a Boolean, the clickableANYTYPE parameter can be of any type and the node(s) will be set to appear clickable if it resolves to true, and not clickable if it resolves to false - with the exception of undefined, when the node(s) will be set to appear clickable (see explanation below).

VARIATION

Uize.Dom.Util.showClickable (nodeBLOB);

When no clickableANYTYPE parameter is specified (or when its value is undefined), the node(s) will be set to appear clickable.

NOTES

this method can operate on multiple nodes at a time. For more details, see the section on node blob

IMPLEMENTATION INFO

this feature was introduced in this module

Lets you show a node in the layout flow of its surrounding HTML or remove it from the layout flow.

SYNTAX

Uize.Dom.Util.showInLayoutFlow (nodeBLOB,mustShowBOOL);

The effect of this method is similar to setting a value for the display CSS property, except without the negative side effects of using display:none to take a node out of the layout flow. In some browsers, nodes that have their display CSS property set to none (or that are contained inside a DOM tree where the parent node has its display set to none) will report offset dimensions of zero and may report other less than useful values for runtime related rendering properties, thereby tripping up JavaScript UI setup code that may act on such nodes.

Instead of using the display property, this method sets values for both the position and visibility properties. When a value of true is specified for the mustShowBOOL parameter, then the position property is set to relative and the visibility property is set to inherit. And when false is specified for mustShowBOOL, then position is set to absolute and visibility is set to hidden.

NOTES

this method can operate on multiple nodes at a time. For more details, see the section on node blob

IMPLEMENTATION INFO

this feature was introduced in this module

Returns a string, representing the serialization of the specified set of CSS style properties.

SYNTAX

Uize.Dom.Util.stylePropertiesAsStr (stylePropertiesOBJ);

EXAMPLE

Uize.Dom.Util.stylePropertiesAsStr ({
  display:'block',
  position:'absolute',
  visibility:'inherit',
  top:100
});

In the above example, the Uize.Dom.Util.stylePropertiesAsStr method call would return the string output 'display:block; position:absolute; visibility:inherit; top:100px;'.

IMPLEMENTATION INFO

this feature was introduced in this module

IMPLEMENTATION INFO

this feature was introduced in this module

IMPLEMENTATION INFO

this feature was introduced in this module