🎉 Black Friday deal! 30% 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)

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

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