Every good library deserves documentation

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.

Return values

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.

Dependencies

JavaScript

document.querySelector

Manipulator

none

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.

Return values

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

Dependencies

JavaScript

document.querySelectorAll

Manipulator

none

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

Return values

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

Dependencies

JavaScript

document.getElementById
document.getElementsByTagName
RegExp.test

Manipulator

None

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

Return values

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"

Dependencies

JavaScript

document.getElementsByTagName
RegExp.test
Array.push

Manipulator

None

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.

Return values

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

Dependencies

JavaScript

String.toLowerCase

Manipulator

None

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.

Return values

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

Dependencies

JavaScript

String.match
String.toLowerCase

Manipulator

None

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.

Return values

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

Dependencies

JavaScript

String.match
String.toLowerCase

Manipulator

None

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.

Return values

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.

Dependencies

JavaScript

document.childNodes
Array.push
String.match
String.toLowerCase

Manipulator

None

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

Return values

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

Dependencies

JavaScript

document.createElement
document.appendChild
typeof()
try ... catch

Manipulator

None

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

Return values

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

Dependencies

JavaScript

document.createElement
document.insertBefore
typeof()
try ... catch

Manipulator

None

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

Return values

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>

Dependencies

JavaScript

document.createElement
document.insertBefore
document.appendBefore
Node.setAttribute

Manipulator

None

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

Return values

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>

Dependencies

JavaScript

document.createElement
document.appendBefore
Node.setAttribute

Manipulator

None

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

Return values

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.

Dependencies

JavaScript

node.textContent
node.innerText
String.replace

Manipulator

None

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

Return values

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

Dependencies

JavaScript

document.getAttribute
document.removeAttribute
String.toLowerCase

Manipulator

Util.querySelector
Util.addClass
Util.Events.click

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.

Return values

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

Dependencies

JavaScript

RegExp
String.match
String.replace
Try ... catch

Manipulator

None

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

Return values

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>

Dependencies

JavaScript

Try ... catch

Manipulator

None

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

Return values

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

Dependencies

JavaScript

RegExp.test
Try ... catch

Manipulator

None

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.

Return values

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>

Dependencies

JavaScript

RegExp.test
Try ... catch

Manipulator

None

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.

Return values

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>

Dependencies

JavaScript

RegExp.test
String.replace
Try ... catch

Manipulator

None

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.

Return values

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>

Dependencies

JavaScript

RegExp.test
Try ... catch

Manipulator

Util.addClass
Util.removeClass

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

Return values

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.

Dependencies

JavaScript

None

Manipulator

Util.vendorProperty

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

Return values

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.

Dependencies

JavaScript

None

Manipulator

Util.vendorProperty

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 dependencies 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

Return values

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.

Dependencies

JavaScript

window.getComputedStyle
String.replace

Manipulator

Util.vendorProperty

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

Return values

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

Examples

No examples

Dependencies

JavaScript

document.parentNode
document.nodeName

Manipulator

Util.getComputedStyle

Definition

Name: Util.contains
Syntax: Boolean = Util.contains( Node scope, Node node )

Description

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

Parameters

scope: Node scope to check if node is inside
node: Node node to check

Return values

True if node is a child of scope - or false if not.

Examples

No examples

Dependencies

JavaScript

Node.contains

Manipulator

Nothing

Definition

Name: Util.containsOrIs
Syntax: Boolean = Util.containsOrIs( Node scope, Node node )

Description

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

Parameters

scope: Node scope to check if node is inside
node: Node node to check

Return values

True if node is same node or a child of scope - or false if not.

Examples

No examples

Dependencies

JavaScript

Nothing

Manipulator

u.contains

Definition

Name: Util.elementMatches
Shorthand: u.em
Syntax: Boolean = Util.elementMatches( Node node, String selector )

Description

Check if selector matches node.

Parameters

node: Node node to check selector against
selector: String selector string to check

Return values

True if selector matches node - or false if not.

Examples

No examples

Dependencies

JavaScript

Element.matches

Manipulator

u.nodeInList

DOM

Functions

Util.querySelector

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.querySelectorAll

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.getElement

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.getElements

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.parentNode

Definition

Description

Parameters

Options

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.previousSibling

Definition

Description

Parameters

Options

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.nextSibling

Definition

Description

Parameters

Options

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.childNodes

Definition

Description

Parameters

Options

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.appendElement

Definition