JCORE Utils is a collection of helper scripts
npm install @jcodigital/jcore-utilsJCORE-Utils (jUtils) is a collection of handy JavaScript utility scripts for DOM manipulation, UI behaviors, and common frontend tasks. It is designed to be lightweight, modular, and easy to integrate into any browser-based project.
- Sticky Elements: Easily make elements sticky on scroll with optional spacers.
- Scroll Detection: Add classes and CSS variables based on scroll position and direction.
- Height Synchronization: Dynamically set CSS variables for element heights.
- Toggle System: Flexible toggling of classes on elements via click, hover, or focus, with group and timeout support.
- Helper Functions: Utilities for querying elements, debouncing, focus detection, and more.
``sh`
pnpm add @jcodigital/jcore-utilsor
npm install @jcodigital/jcore-utilsor
yarn add @jcodigital/jcore-utils
Bundle the library in your project (see the build script for browser bundling). The main entry point will automatically initialize all utilities on DOMContentLoaded.
`js`
import "@jcodigital/jcore-utils";
Or, if you want to initialize specific features manually:
`js
import { scrollInit } from "@jcodigital/jcore-utils/dist/scroll";
import { toggleInit } from "@jcodigital/jcore-utils/dist/toggle";
import { heightInit } from "@jcodigital/jcore-utils/dist/height";
scrollInit();
toggleInit();
heightInit();
`
Add data-jsticky to any element to make it sticky when scrolling past its position. Optionally, add data-jsticky-no-spacer to disable the automatic spacer.
`html`Sticky Header
Add data-jscroll to elements to enable scroll-based class toggling and CSS variable updates.
- data-threshold: (optional) Number of pixels to trigger up/down classes (default: 75)data-scrollstart
- : (optional) Scroll position to toggle the scrollTop class
`html`
Classes added:
- scrollActive: Always present when enabledscrollTop
- : When above scrollstartscrollUp
- / scrollDown: When scrolling up/down past the threshold
CSS variable:
- --jutils-height: Set to the element's height
Add data-jheight to an element to set a CSS variable with its height on itself and/or target elements.
- data-jheight: (optional) CSS selector(s) for target elements (comma-separated)data-name
- : (optional) Name for the CSS variable (default: jcore-height)
`html`Header
Add data-jtoggle to elements to enable toggling classes on targets via click, hover, or focus.
- data-class: (optional) Class to toggle (default: toggle)data-timeout
- : (optional) Timeout for activation/deactivation (ms)data-group
- : (optional) Group name for exclusive togglingdata-jhover
- , data-jfocus: Enable hover/focus triggers
Targets are specified via data-jtoggle (selector or "parent"). Triggers can be set with data-jtrigger.
`html`
You can import and use helper functions directly:
- getHTMLElements(selector: string): HTMLElement[]getHTMLTargets(element: HTMLElement, key: string): HTMLElement[]
- getNumericDataValue(value: string | undefined, defaultValue: number): number
- debounce(func: Function, timeout = 300): Function
- isFocusable(el: HTMLElement): boolean
-
- Format code: pnpm run formatpnpm run lint
- Lint code: pnpm run build
- Build: pnpm run watch`
- Watch:
GPL-3.0-or-later
JCO Digital