DOM

DOM query and manipulation tools.

Functions

Util.querySelector

Definition

Name
Util.querySelector
Shorthand
u.qs
Syntax
Node = Util.querySelector( String query [, Node scope] )

Description

Shorthand for document.querySelector.

Returns the first matching element within the scope. Returns null if no match is found.

Parameters

query
String CSS style selector.
scope
Node Optional, any given node could be used as scope. Default is document.

Returns

Returns matching node.

Examples

u.querySelector("#content");

returns Node with id=content

u.querySelector("#content .link", content_node);

returns Node with classname=link, within content_node.

var content_node = u.querySelector("#content"); u.querySelector(".link", content_node);

returns Node with classname=link, within content_node. Using scope on repeated queries will make the query faster, as you limit the required DOM-traversing.

Uses

JavaScript
  • document.querySelector
Manipulator
  • none

Util.querySelectorAll

Definition

Name
Util.querySelectorAll
Shorthand
u.qsa
Syntax
NodeList = Util.querySelectorAll( String query [, Node scope] )

Description

Shorthand for document.querySelectorAll.

Returns a list of the elements within the document which match the specified group of selectors. The object returned is a NodeList. Returns an empty NodeList if no matches are found.

Parameters

query
String CSS style selector.
scope
Node Optional, any given node could be used as scope. Default is document.

Returns

Returns a NodeList containing the nodes that match the specified group of selectors.

Examples

u.querySelectorAll("#content .test");

returns NodeList containing all nodes with classnames=test

var list_node = u.querySelector("ul.list"); u.querySelectorAll("li.item", list_node);

returns NodeList containing all nodes with classnames=item

Uses

JavaScript
  • document.querySelectorAll
Manipulator
  • none

Util.getElement

Definition

Name
Util.getElement
Shorthand
u.ge
Syntax
Node = Util.getElement( String identifier [, Node scope] )

Description

Get node by id/class/tag prioritized in this order
Returns by elementById if any matches else first node with matching classname from scope If still no matches, looks for first node with tagname from scope

Can be used to query nodes using regular expressions.

Parameters

identifier
String node id, classname or tagname. Can also be specified using regular-expression syntax.
scope
Node Optional, any given node can be used as scope

Returns

First Node which matches the identifier

Examples

<div class="scene"> <div class="div"></div> <div id="div"></div> </div> <script>u.getElement("div");</script>

returns Node with id=div

<div class="scene"> <div class="div"></div> <div class="footer"></div> </div> <script>u.getElement("div");</script>

returns Node with class=div

<div class="scene"> <div class="content"></div> <div class="footer"></div> </div> <script>u.getElement("div");</script>

returns Node with class=scene

<div class="scene"> <div class="content2"></div> <div class="content1"></div> </div> <script>u.getElement("content[0-1]*");</script>

returns Node with class=content1

Uses

JavaScript
  • document.getElementById
  • document.getElementsByTagName
  • RegExp.test
Manipulator

None

Util.getElements

Definition

Name
Util.getElements
Shorthand
u.ges
Syntax
Array = Util.getElements( String identifier [, Node scope] )

Description

Get elements (class/tag)
Returns all elements with matching classname from scope
If no matches, return nodes with tagname from scope

Can be used to query nodes using regular expressions.

Parameters

identifier
String node id, classname or tagname. Can also be specified using regular-expression syntax.
scope
Node Optional, any given node can be used as scope

Returns

Returns all elements with matching classname from scope
If no matches, return elements with tagname from scope

Examples

<div class="scene"> <div class="content2"></div> <div class="content1"></div> </div> <script>u.getElement("content[0-2]*");</script>

returns Array containing Nodes with class=content1 and class="content2"

Uses

JavaScript
  • document.getElementsByTagName
  • RegExp.test
  • Array.push
Manipulator

None

Util.parentNode

Definition

Name
Util.parentNode
Shorthand
u.pn
Syntax
Node = Util.parentNode( Node node [, JSON _options] )

Description

Get first parentNode of node or first parent matching _options.

Parameters

node
Node Node to get parentNode of.
_options
JSON Optional filters to include/exclude specific elements.
Options
exclude
CSS-selector to exclude as parent node.
include
CSS-selector to include as parent node.

Returns

The parentNode of node, matching node_type if specified

Examples

<div class="scene"> <ul class="list"> <li class="item"></li> </ul> </div> <script> var item = u.querySelector(".scene .item"); u.parentNode(item, {"include":"div"}); </script>

Returns Node div.scene

<div class="scene"> <ul class="list"> <li class="item"> <ul class="list"> <li class="inner"></li> </ul> </li> </ul> </div> <script> var item = u.querySelector(".scene span"); u.parentNode(item, {"exclude":"li.inner", "include":"li"}); </script>

Returns Node li.item

Uses

JavaScript
  • String.toLowerCase
Manipulator

None

Util.previousSibling

Definition

Name
Util.previousSibling
Shorthand
u.ps
Syntax
Node = Util.previousSibling( Node node [, JSON _options] )

Description

Get previous sibling, not counting text nodes as siblings and matching _options

Parameters

node
Node node to find previous sibling of.
_options
JSON Optional filters to include/exclude specific elements.
Options
exclude
CSS-selector to exclude as sibling node.
include
CSS-selector to include as sibling node.

Returns

Returns previous sibling or false if none is found

Examples

<div class="scene"> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </div> <script> var footer = u.querySelector(".footer"); u.previousSibling(footer); </script>

Returns Node div.content

<div class="scene"> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </div> <script> var footer = u.querySelector(".footer"); u.previousSibling(footer, {"exclude":"content"}); </script>

Returns Node div.header

Uses

JavaScript
  • String.match
  • String.toLowerCase
Manipulator

None

Util.nextSibling

Definition

Name
Util.nextSibling
Shorthand
u.ns
Syntax
Node = Util.nextSibling( Node node [, JSON _options] )

Description

Get next sibling, not counting text nodes as siblings and matching _options

Parameters

node
Node node to find next sibling of
_options
JSON Optional filters to include/exclude specific elements.
Options
exclude
CSS-selector to exclude as sibling node.
include
CSS-selector to include as sibling node.

Returns

Returns next sibling or false if none found

Examples

<div class="scene"> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.nextSibling(header); </script>

Returns Node div.content

<div class="scene"> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.nextSibling(header, {"exclude":".content"}); </script>

Returns Node div.footer

Uses

JavaScript
  • String.match
  • String.toLowerCase
Manipulator

None

Util.childNodes

Definition

Name
Util.childNodes
Shorthand
u.cn
Syntax
Node = Util.childNodes( Node node [, JSON _options] )

Description

Get childNodes of node, not counting text nodes and matching _options.

Parameters

node
Node node to find childNodes of
_options
JSON Optional filters to include/exclude specific elements.
Options
exclude
CSS-selector to exclude as childnode node.
include
CSS-selector to include as childnode node.

Returns

Returns Array of childNodes or false if none found

Examples

<div class="scene"> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </div> <script> var scene = u.querySelector(".scene"); u.childNodes(scene, {"exclude":".header"}); </script>

returns Array two Nodes div.content and div.footer.

Uses

JavaScript
  • document.childNodes
  • Array.push
  • String.match
  • String.toLowerCase
Manipulator

None

Util.appendElement

Definition

Name
Util.appendElement
Shorthand
u.ae
Syntax
Node = Util.appendElement( Node node, Mixed node_type [, Object attributes] )

Description

Appends node_type to node

Parameters

node
Node node to append childNode to
node_type
Mixed type of node you want to add, or an existing node
attributes
JSON Optional, JSON object with attributes like target, class, id etc. to be added to new node.
Options
class
Add className to node
id
Add id to node
html
Add innerHTML to node
href
Add href to node
target
Add target to node
type
Add type to node
src
Add src to node
alt
Add alt to node
title
Add title to node

Returns

Returns the added Node

Examples

<div class="scene"> <div class="header"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.appendElement(header, "div", {"class":"new","html":"innerHTML"}); </script>

returns Node div.new in the following structure

<div class="scene"> <div class="header"> <div class="new">innerHTML</div> </div> <div class="footer"></div> </div>

Can also be used to restructure html.

var header = u.querySelector("#header"); var nav = u.querySelector("#navigation"); u.ae(header, nav);

This moves #navigation into #header. #navigation will be added as last child of #header

Uses

JavaScript
  • document.createElement
  • document.appendChild
  • typeof()
  • try ... catch
Manipulator

None

Util.insertElement

Definition

Name
Util.insertElement
Shorthand
u.ie
Syntax
Node = Util.insertElement( Node node, Mixed node_type [, JSON attributes] )

Description

Inserts node_type in beginning of node

Parameters

node
Node node to insert childNode into
node_type
Mixed type of node you want to add, or an existing node
attributes
JSON Optional, JSON object with attributes like target, class, id etc. to be added to new node.
Options
class
Add className to node
id
Add id to node
html
Add innerHTML to node
href
Add href to node
target
Add target to node
type
Add type to node
src
Add src to node
alt
Add alt to node
title
Add title to node

Returns

Returns the inserted Node

Examples

<div class="scene"> <div class="header"></div> <div class="footer"></div> </div> <script> var scene = u.querySelector(".scene"); u.insertElement(scene, "div", {"class":"new","html":"innerHTML"}); </script>

returns Node div.new in the following structure

<div class="scene"> <div class="new">innerHTML</div> <div class="header"></div> <div class="footer"></div> </div>

Can also be used to restructure html.

var header = u.querySelector("#header"); var nav = u.querySelector("#navigation"); u.ie(header, nav);

This moves #navigation into #header. #navigation will be added as first child of #header

Uses

JavaScript
  • document.createElement
  • document.insertBefore
  • typeof()
  • try ... catch
Manipulator

None

Util.wrapElement

Definition

Name
Util.wrapElement
Shorthand
u.we
Syntax
Node = Util.wrapElement( Node node, String node_type [, JSON attributes] )

Description

Wrap node with node_type

Parameters

node
Node node to wrap
node_type
String node_type of wrapping Node
attributes
JSON Optional, JSON object with attributes like target, class, id etc. to be added to new node.
Options
class
Add className to wrapping node
id
Add id to wrapping node
href
Add href to wrapping node
target
Add target to wrapping node
title
Add title to wrapping node

Returns

The wrapping Node

Examples

<div class="scene"> <div class="header"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.wrapElement(header, "div", {"class":"wrapper"}); </script>

returns Node div.wrapper in the following structure

<div class="scene"> <div class="wrapper"> <div class="header"></div> </div> <div class="footer"></div> </div>

Uses

JavaScript
  • document.createElement
  • document.insertBefore
  • document.appendBefore
  • Node.setAttribute
Manipulator

None

Util.wrapContent

Definition

Name
Util.wrapContent
Shorthand
u.wc
Syntax
Node = Util.wrapContent( Node node, String node_type [, JSON attributes] )

Description

Wrap content of node in node_type

Parameters

node
Node node to wrap content of
node_type
String node_type of wrapping Node
attributes
JSON Optional, JSON object with attributes like target, class, id etc. to be added to new node.
Options
class
Add className to wrapping node
id
Add id to wrapping node
href
Add href to wrapping node
target
Add target to wrapping node
title
Add title to wrapping node

Returns

The wrapping Node

Examples

<div class="scene"> <div class="header"></div> <div class="footer"></div> </div> <script> var scene = u.querySelector(".scene"); u.wrapContent(scene, "div", {"class":"wrapper"}); </script>

returns Node div.wrapper in the following structure

<div class="scene"> <div class="wrapper"> <div class="header"></div> <div class="footer"></div> </div> </div>

Uses

JavaScript
  • document.createElement
  • document.appendBefore
  • Node.setAttribute
Manipulator

None

Util.textContent

Definition

Name
Util.textContent
Shorthand
u.text
Syntax
String = Util.textContent( Node node )

Description

Get textContent of Node, with fallback to innerText or regular expression in older browsers.

Parameters

node
String node to get textContent of

Returns

The textContent of the node - equivalent to node.textContent.

Examples

<div class="textcontent"> <!-- COMMENT --> <span>node.textContent</span> </div> <script> var div = u.querySelector(".textcontent"); u.textContent(div).trim(); </script>

Returns node.textContent.

Uses

JavaScript
  • node.textContent
  • node.innerText
  • String.replace
Manipulator

None

Util.clickableElement

Definition

Name
Util.clickableElement
Shorthand
u.ce
Syntax
Node = Util.clickableElement( Node node, [, JSON options] )

Description

Make node clickable - adding click event (if Events module is included), and removing href from first a found within node (or optionally in options.use). Value of href is stored in node.url. It applies link class to node if it contains a otherwise clickable class is added.

You would typically use this to expand the clickable area in a list, where the actual link is nested within the li, but you want the entire li to be clickable.

You can automate click handling by defining a type in the options parameter. Default is to not handle the click event.

Parameters

node
Node node to make clickable.
options
JSON Optional, JSON object with options for click handling.
Options
type
link
Add click handler to redirect to url. Detects CMD/CTRL key, sending url to new tab/window. Detects page.navigate function to redirect url to ajax navigation controller.
use
HTML tag to look for link in

Returns

The node

Examples

<div class="scene"> <div class="header"><h1><a href="index">Index</a></h1></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.clickableElement(header); </script>

returns node where node.url = "index", with applied click event listener, in the following structure:

<div class="scene"> <div class="header link"><h1><a>Index</a></h1></div> <div class="footer"></div> </div>
<div class="scene"> <div class="header"> <h1><a href="index">Index</a></h1> <h2><a href="default">Index</a></h2> </div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.clickableElement(header, {"use":"h2"}); </script>

returns node where node.url = "default", with applied click event listener

Uses

JavaScript
  • document.getAttribute
  • document.removeAttribute
  • String.toLowerCase
Manipulator
  • Util.querySelector
  • Util.addClass
  • Util.Events.click

Util.classVar

Definition

Name
Util.classVar
Shorthand
u.cv
Syntax
String = Util.classVar( Node node, String var_name )

Description

Get classVar value from node.

ClassVars are used to add variables to HTML nodes via the class attribute. This method has been choosen to avoid obscuring the HTML with unsupported attributes and/or tags. The composition is var_name:value.

Parameters

node
Node node to get classVar from
var_name
String var_name to get value part of.

Returns

The value of classVar var_name if it exists, else false.

Examples

<div class="scene"> <ul> <li class="id:81">item</li> </ul> </div> <script> var li = u.querySelector("li"); u.classVar(li, "id"); </script>

Returns "81" which is the value of the classVar "id" on the LI

Uses

JavaScript
  • RegExp
  • String.match
  • String.replace
  • Try ... catch
Manipulator

None

Util.setClass

Definition

Name
Util.setClass
Shorthand
u.sc
Syntax
String = Util.setClass( Node node, String classname )

Description

Set className of node. Deletes all other classNames for node.

Parameters

node
Node Node to set class on.
classname
String the new classname for the element

Returns

ClassName before update

Examples

<div class="scene"> <div class="header"></div> <div class="footer"></div> </div> <script> var footer = u.querySelector(".footer"); u.setClass(footer, "bottom"); </script>

Returns "footer" and updates the HTML to:

<div class="scene"> <div class="header"></div> <div class="bottom"></div> </div>

Uses

JavaScript
  • Try ... catch
Manipulator

None

Util.hasClass

Definition

Name
Util.hasClass
Shorthand
u.hc
Syntax
Boolean = Util.hasClass( Node node, String classname )

Description

Check if an element has a given classname. Can use Regular Expression syntax.

Parameters

node
Node node to check
classname
String classname to checked for existence of

Returns

true if the element has the classname, false if not

Examples

<div class="scene"> <div class="header extra"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.hasClass(header, "extra"); </script>

Returns true

<div class="scene"> <div class="header extra"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.hasClass(header, "ex"); </script>

Returns false

<div class="scene"> <div class="header type1"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.hasClass(header, "type[0-3]"); </script>

Returns true

<div class="scene"> <div class="header type1"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.hasClass(header, "type2|type3"); </script>

Returns false

Uses

JavaScript
  • RegExp.test
  • Try ... catch
Manipulator

None

Util.addClass

Definition

Name
Util.addClass
Shorthand
u.ac
Syntax
String = Util.addClass( Node node, String classname [, Boolean dom_update] )

Description

Add className to node, if it does not already exist, then updates DOM.

DOM is automatically updated as default, because that is the only way to ensure the effects will be seen instantaneous. Set dom_update to false if DOM does not need to be updated after adding class - ie. if you add classes to many nodes at the same time and DOM only needs to be updated in the end. This increased speed manyfold.

Parameters

node
Node node to add classname to
classname
String classname to be added
dom_update
Boolean Optional DOM update, Default true.

Returns

node className after new classame has been added

Examples

<div class="scene"> <div class="header"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.addClass(header, "extra"); </script>

Returns "header extra" and updates the HTML to:

<div class="scene"> <div class="header extra"></div> <div class="bottom"></div> </div>

Uses

JavaScript
  • RegExp.test
  • Try ... catch
Manipulator

None

Util.removeClass

Definition

Name
Util.removeClass
Shorthand
u.rc
Syntax
String = Util.removeClass( Node node, String classname [, Boolean dom_update] )

Description

Remove all instances of the classname from node. Can use Regular expressions.

DOM is automatically updated as default, because that is the only way to ensure the effects will be seen instantaneous. Set dom_update to false if DOM does not need to be updated after removing class - ie. if you remove classes from many nodes at the same time and DOM only needs to be updated in the end. This increased speed manyfold.

Parameters

node
Node node to remove classname from
classname
String the classname to be removed
dom_update
Boolean Optional DOM update, Default true.

Returns

The new className of node, after classame has been removed

Examples

<div class="scene"> <div class="header type1"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.removeClass(header, "type[0-5]"); </script>

Returns "header" and updates the HTML to:

<div class="scene"> <div class="header"></div> <div class="bottom"></div> </div>
<div class="scene"> <div class="header redundant redundant"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.removeClass(header, "redundant"); </script>

Returns "header" and updates the HTML to:

<div class="scene"> <div class="header"></div> <div class="bottom"></div> </div>

Uses

JavaScript
  • RegExp.test
  • String.replace
  • Try ... catch
Manipulator

None

Util.toggleClass

Definition

Name
Util.toggleClass
Shorthand
u.tc
Syntax
String = Util.toggleClass( Node node, String classname [, String _classname] [, Boolean dom_update] )

Description

Toggles classame on node. If classame exists, it will be removed. If classame does not exist, it will be added. If _classame is given, the function will toggle the two classnames, adding/removing based on existence of classame/_classame.

DOM is automatically updated as default, when classes have been toggled, because that is the only way to ensure the effects will be seen instantaneous. Set dom_update to false if DOM does not need to be updated after toggling class - ie. if you toggle classes on many nodes at the same time and DOM only needs to be updated in the end. This increased speed manyfold.

Parameters

node
Node node to toggle classname on
classname
String classname to be added/removed from node
_classname
String secondary classname to add/remove.
dom_update
Boolean Optional DOM update, Default true.

Returns

Node classname after toggling classes.

Examples

<div class="scene"> <div class="header on"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.toggleClass(header, "on"); </script>

Returns "header" and updates the HTML to:

<div class="scene"> <div class="header"></div> <div class="bottom"></div> </div>
<div class="scene"> <div class="header on"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.toggleClass(header, "on", "off"); </script>

Returns "header off" and updates the HTML to:

<div class="scene"> <div class="header off"></div> <div class="bottom"></div> </div>
<div class="scene"> <div class="header off"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.toggleClass(header, "on", "off"); </script>

Returns "header on" and updates the HTML to:

<div class="scene"> <div class="header on"></div> <div class="bottom"></div> </div>

Uses

JavaScript
  • RegExp.test
  • Try ... catch
Manipulator
  • Util.addClass
  • Util.removeClass

Util.applyStyle

Definition

Name
Util.applyStyle
Shorthand
u.as
Syntax
Void = Util.applyStyle( Node node, String property, String value [, Boolean dom_update] )

Description

Adds style property to node. Basically this is just a shorthand function for setting: node.style.property = value - with automatic vendor prefixing and update the DOM (default).

DOM is automatically updated as default, because that is the only way to ensure the effects will be seen instantaneous. Set dom_update to false if DOM does not need to be updated after applying style property - ie. if you apply style properties on many nodes at the same time and DOM only needs to be updated in the end. This increased speed manyfold.

If you need to animate style property, use Util.Animation equivalent, which can translate applied transition to timed execution for fallback.

It uses u.vendorProperty to ensure correct vendor prefix is added to the property.

Parameters

node
Node node to apply style property to
property
String the CSS style property to apply
value
String the value of the style property
dom_update
Boolean Optional DOM update, Default true.

Returns

Void - does not return anything, because it is impossible to tell if browser executed the update the given property as expected.

Examples

<div class="scene"> <div class="header"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.applyStyle(header, "display", "none"); </script>

Adds style attribute, style="display: none;" to div.header, thus hiding it.

Uses

JavaScript

None

Manipulator
  • Util.vendorProperty

Util.applyStyles

Definition

Name
Util.applyStyles
Shorthand
u.ass
Syntax
Void = Util.applyStyles( Node node, JSON styles, [, Boolean dom_update] )

Description

Adds style properties to node. Basically this is just a shorthand for setting multiple node.style.property = value at once, but it also, as default, updates the DOM.

DOM is automatically updated as default, because that is the only way to ensure the effects will be seen instantaneous. Set dom_update to false if DOM does not need to be updated after applying style property - ie. if you apply style properties on many nodes at the same time and DOM only needs to be updated in the end. This increased speed manyfold.

If you need to animate style property, use Util.Animation equivalent, which can translate applied transition to timed execution for fallback.

It uses u.vendorProperty to ensure correct vendor prefix is added to the property.

Parameters

node
Node node to apply style property to
styles
JSON Object containing proporty:value pairs to be applied to node
dom_update
Boolean Optional DOM update, Default true.

Returns

Void - does not return anything, because it is impossible to tell if browser supports the given styles.

Examples

<div class="scene"> <div class="header"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.applyStyle(header, {"display":"inlin", "color":"red"}); </script>

Adds style attribute, style="inline: none; color: red;" to div.header.

Uses

JavaScript

None

Manipulator
  • Util.vendorProperty

Util.getComputedStyle

Definition

Name
Util.getComputedStyle
Shorthand
u.gcs
Syntax
String = Util.getComputedStyle( Node node, String property )

Description

Get computed style value for css property.

Accepts both JS and CSS syntax properties. Ie: backgroundImage or background-image. It uses u.vendorProperty to ensure correct vendor prefix is added to the property.

Note: Some older browsers returns the specified value, whereas newer browser return the computed value, ie. widths specified with % will be returned as px, and backgrounds will be returned as rgb().

Parameters

node
Node node to get property from
property
String the property to get computed value of

Returns

The value of the specified property.

Examples

<div class="scene"> <div class="header"></div> <div class="footer"></div> </div> <script> var header = u.querySelector(".header"); u.getComputedStyle(header, "display"); </script>

Returns the CSS display property of div.header.

Uses

JavaScript
  • window.getComputedStyle
  • String.replace
Manipulator
  • Util.vendorProperty

Util.hasFixedParent

Definition

Name
Util.hasFixedParent
Shorthand
u.hfp
Syntax
Boolean = Util.hasFixedParent( Node node )

Description

Check if node has position: fixed parent. Fixed nodes needs to be handled differently when using drag'n'drop or other dynamic repositioning.

Parameters

node
Node node to get property from

Returns

True if node has fixed parent - or false if not.

Examples

No examples

Uses

JavaScript
  • document.parentNode
  • document.nodeName
Manipulator
  • Util.getComputedStyle

Util.nodeWithin

Definition

Name
Util.nodeWithin
Shorthand
u.nw
Syntax
Boolean = Util.nodeWithin( Node node, Node scope )

Description

Check if node is within (is a child of) scope.

Parameters

node
Node node to check
scope
Node scope to check

Returns

True if node is a child of scope - or false if not. It also returns false if node IS scope (as opposed to Node.contains).

Examples

No examples

Uses

JavaScript
  • Node.contains
Manipulator

Nothing

Files

Main file

  • u-dom.js

Segment support files

  • u-dom-desktop_ie10.js
  • u-dom-desktop_light.js

Segment dependencies

desktop_edge
u-dom.js
desktop_ie11
u-dom.js
desktop
u-dom.js
desktop_ie10
u-dom.js + u-dom-desktop_ie10.js
desktop_ie9
u-dom.js + u-dom-desktop_ie10.js
desktop_light
u-dom.js + u-dom-desktop_light.js
tablet
u-dom.js
tablet_light
u-dom.js
smartphone
u-dom.js
mobile
not tested
mobile_light
not tested
tv
u-dom.js + u-dom-desktop_light.js
seo
not supported