jcore-utils

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

Features

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

Installation

``sh
pnpm add @jcodigital/jcore-utils


or

npm install @jcodigital/jcore-utils

or

yarn add @jcodigital/jcore-utils
`

Usage

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();
`

API Reference

$3

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



`

$3

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 enabled
- scrollTop: When above scrollstart
- scrollUp / scrollDown: When scrolling up/down past the threshold

CSS variable:
- --jutils-height: Set to the element's height

$3

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


`

$3

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 toggling
- data-jhover, data-jfocus: Enable hover/focus triggers

Targets are specified via data-jtoggle (selector or "parent"). Triggers can be set with data-jtrigger.

`html
Menu



`

$3

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

Development

- Format code: pnpm run format
- Lint code: pnpm run lint
- Build: pnpm run build
- Watch: pnpm run watch`

License

GPL-3.0-or-later

Author

JCO Digital

Links

- GitHub Repository
- Report Issues