⚡️ Download 385 HTML, CSS, JS Components and 9 templates for $129 - Limited time offer ⏳


Progress value is 30%

Utilities (JS)

The 'util.js' file contains a set of JavaScript utility functions that are used across multiple components

Browser support: all modern browsers (including IE11).

🔍 On this page:

  1. Class Manipulation
  2. DOM Methods
  3. Focus
  4. Utility Classes
  5. Easing Functions
  6. Misc

Class Manipulation #

These functions can be used to add/remove classes from DOM elements.

Function Description
Util.addClass(element, 'className') add a class (or list of classes) to an element
Util.removeClass(element, 'className') remove a class (or list of classes) to an element
Util.hasClass(element, 'className') check if element has a specified class
Util.toggleClass(element, 'className', bool) add or remove a class (or list of classes) to an element (based on the value of bool)

DOM Methods #

These functions can be used to search the DOM or get info about a specific node.

Function Description
Util.getChildrenByClassName(parent, 'className') return children of an element with a specific class
Util.is(element, selector) check if the element matches a specific selector
Util.getIndexInArray(array, element) return the index of an element in a node array

Focus #

This function can be used to move the focus to a new DOM element (works also for elements that cannot receive the focus).

Function Description
Util.moveFocus(element) move focus to a new DOM element

Utility classes #

Cladd Description
.js-tab-focus make focus ring visible only for keyboard navigation (i.e., tab key)

If you need to dynamically add .js-tab-focus elements to the DOM, you can call the resetFocusTabsStyle() function to make sure the proper outline style is applied to these new elements:

// dynamically import new .js-tab-focus elements
// code here  - e.g., your ajax call

// reset style of .js-tab-focus elements

Easing Functions #

Easing functions for your JavaScript animations:

Function Description
Math.easeInOutQuad(t, b, c, d) quadratic easing in/out
Math.easeInQuart(t, b, c, d) quartic easing in
Math.easeOutQuart(t, b, c, d) quartic easing out
Math.easeInOutQuart(t, b, c, d) quartic easing in/out

The above functions accept as arguments:

  • t: animation progress (time);
  • b: initial value;
  • c: delta (final value - initial value);
  • d: animation duration.

Misc #

Function Description
Util.cssSupports('property', 'value') check if a CSS property and/or value are supported
Util.extend(default, options) merge a set of user options into a list of defaults
Util.osHasReducedMotion() return true if Reduced Motion is enabled

Util.setHeight(initVal, finalVal, el, duration, cb, timeFn)

animate the height of an element

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.