🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


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)

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

✅ Project duplicated

✅ Project created

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