SpryJS

SpryJS is a lightweight and straightforward JavaScript toolkit designed to complement SpryCSS, though it can also be used independently. Its primary objective is to offer essential functionality and utilities that accelerate development while keeping your development kit light and free of dependencies.

Support

You can report issues or make feature requests on the GitHub Issues page.

If you like to help us grow, then please add a star on the SpryJS GitHub Repository or by sharing us on social media.

Star Issue Watch

Installation

Using a Package Manager


                                npm install @ggedde/spry-js


                                yarn add @ggedde/spry-js


                                pnpm add @ggedde/spry-js


                                bun add @ggedde/spry-js

Using the CDN ES Module Build

Using Default Export


                        <script type="module">
                            import spry from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            spry('.something').addClass('open');
                        </script>

load

Automatically load all SpryJS components with default options.


                        <script type="module">
                            import spry from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            spry.load();
                        </script>

partials

Using Partials.


                        <script type="module">
                            import { cookie, hash, navigable, observe, parallax, scrollspy, slider, toggle, query } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            query('.something').addClass('open');
                        </script>

Using the CDN Global Build


                        <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>

Usage


                        <script>
                            // Run after dom ready
                            spry('.something').addClass('open');
                        </script>

                        <!-- OR Inline -->
                        <button onclick="spry('.something').toggleClass('open')">
                            Click Me
                        </button>

Global Build Query Param Options

load

Automatically load all SpryJS components with default options when Dom is ready.


                        <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js?load"></script>

var

Use a custom Variable to assign SpryJs to.


                        <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js?var=$"></script>
                        <button onclick="$('.something').toggleClass('open')">
                            Click Me
                        </button>

* Be careful as this may lead to confusion among other developers. You should only do this if you know what you are doing.

run

Run a function you specify when SpryJS is fully loaded.


                        <script defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js?run=spryJsLoaded"></script>
                        <script>
                        function spryJsLoaded() {
                            spry('.something').addClass('open');
                        }
                        </script>

Navigable

Navigable enables keyboard navigation for specific elements using the arrow keys and triggered via the space bar and enter keys. Additionally, it provides the functionality to use the escape key to dismiss focus.

Usage


                    <nav class="navigable">
                        <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </nav>

API

Initiate


                        <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>
                        <script>
                            var spryObj = spry('.navigable').navigable();
                        </script>

See Global Build Query Param Options for additional loading options.


                        <script type="module">
                            import { navigable } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            const obj = navigable();
                        </script>


                    import { navigable } from 'spry-js';
                    const obj = navigable();

Update

This allows you to update the objects after Dom changes have been made without duplicating the event listeners. Useful with page builders and other dynamic Dom loading applications.


                    // Update Objects
                    spryObj.navigableUpdate();

                    // OR Update All Components
                    spryObj.update();


                    obj.update();


                    obj.update();

Destroy

This allows you to remove all event listeners and added functionality for the objects.


                    // Destroy Objects
                    spryObj.navigableDestroy();

                    // OR Destroy All Components
                    spryObj.destroy();


                    obj.destroy();


                    obj.destroy();

Options

Default Options


                        navigable({
                            items: '.navigable',
                            selectorAnchor: 'a, button, input, [tabindex]',
                            attributeAnchor: 'data-navigable-anchors',
                        });

items?: string|Element[]

Selector or array of Elements for navigable containers. This will capture keyboard events within this element and navigate between the anchors.

default: ".navigable"

selectorAnchor?: string

Selector Name for anchor items within the Navigable container. Which items within the Navigable container you wont to be able to navigate through.

default: "a, button, input, [tabindex]"

Override with attributeAnchor

attributeAnchor?: string

Data attribute for custom anchor selector.

default: "data-navigable-anchors"

Overrides selectorAnchor

Examples

Observe

Observe enables the tracking of elements based on their position within the viewport. When an element becomes visible, two classes are applied. Upon exiting the viewport, the observing class is removed, while the observed class remains active.

Usage


                    <div class="observe"></div>

API

Initiate


                        <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>
                        <script>
                            var spryObj = spry('.observe').observe();
                        </script>

See Global Build Query Param Options for additional loading options.


                        <script type="module">
                            import { observe } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            const obj = observe();
                        </script>


                    import { observe } from 'spry-js';
                    const obj = observe();

Update

This allows you to update the objects after Dom changes have been made without duplicating the event listeners. Useful with page builders and other dynamic Dom loading applications.


                    // Update Objects
                    spryObj.observeUpdate();

                    // OR Update All Components
                    spryObj.update();


                    obj.update();


                    obj.update();

Destroy

This allows you to remove all event listeners and added functionality for the objects.


                    // Destroy Objects
                    spryObj.observeDestroy();

                    // OR Destroy All Components
                    spryObj.destroy();


                    obj.destroy();


                    obj.destroy();

Options

Default Options


                        observe({
                            items: '.observe',
                            delay: 50,
                            threshold: 0,
                            rootMargin: '0px 0px 0px 0px',
                            classObserved: 'observed',
                            classObserving: 'observing',
                            attributeClassObserved: 'data-observe-class-observed',
                            attributeClassObserving: 'data-observe-class-observing',
                            attributeDelay: 'data-observe-delay'
                        });

`items?: string\|Element[]`	Selector or array of Elements to watch in the observer. `default:` `".observe"`
`delay?: number`	Delay in milliseconds before the Observer acknowledges the observed element. If multiple elements are observed at the same time then the delay will be stacked by the element index. `default:` `100` Override with `attributeDelay`
`threshold?: number`	Either a single number from 0 - 1 or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. `default:` `0` Learn more about threshold
`rootMargin?: string`	Bounding box before computing intersections. Negative values will shrink the bounding box. `default:` `"0px 0px 0px 0px"` Learn more about rootMargin
`classObserved?: string\|string[]`	Class that gets added when elements become visible within the viewport, but does not get removed. `default:` `"observed"` Override with `attributeClassObserved`
`classObserving?: string\|string[]`	Class that gets toggled when elements are visible within the viewport. `default:` `"observing"` Override with `attributeClassObserving`
`attributeDelay?: string`	Data attribute to specify the delay. This will override `delay`. `default:` `"data-observe-delay"` Overrides `delay`
`attributeClassObserved?: string`	Data attribute to specify the observed class. This will override `classObserved`. `default:` `"data-observe-class-observed"` Overrides `classObserved`
`attributeClassObserving?: string`	Data attribute to specify the observing class. This will override `classObserving`. `default:` `"data-observe-class-observing"` Overrides `classObserving`

Examples

Parallax

Parallax enables the movement of elements in relation to viewport scroll. By default, this effect is applied to the child element, though it can also be applied to the background position. To function correctly, Parallax requires the child element or background image to overflow the parent container. It is the user's responsibility to manage the visibility of any overflowing content.

Usage


                        <!-- Parallax Container -->
                        <div style="max-height: 200px; overflow: hidden;">
                            <!-- Parallax Element -->
                            <div><!-- Large Content Here --></div>
                        </div>

API

Initiate


                        <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>
                        <script>
                            var spryObj = spry('.parallax').parallax();
                        </script>

See Global Build Query Param Options for additional loading options.


                        <script type="module">
                            import { parallax } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            const obj = parallax();
                        </script>


                    import { parallax } from 'spry-js';
                    const obj = parallax();

Update

This allows you to update the objects after Dom changes have been made without duplicating the event listeners. Useful with page builders and other dynamic Dom loading applications.


                    // Update Objects
                    spryObj.parallaxUpdate();

                    // OR Update All Components
                    spryObj.update();


                    obj.update();


                    obj.update();

Destroy

This allows you to remove all event listeners and added functionality for the objects.


                    // Destroy Objects
                    spryObj.parallaxDestroy();

                    // OR Destroy All Components
                    spryObj.destroy();


                    obj.destroy();


                    obj.destroy();

Options

Default Options


                        parallax({
                            items: '.parallax',
                            delay: 300,
                            minWidth: 0,
                            threshold: -300,
                            classActive: 'parallaxing',
                            scrollingElement: window,
                            attributeMinWidth: 'data-parallax-width',
                            attributeThreshold: 'data-parallax-threshold',
                            attributeScrollingElement: 'data-parallax-scroller',
                            attributeClassActive: 'data-parallax-active',
                            attributeBackground: 'data-parallax-background',
                            attributeHorizontal: 'data-parallax-horizontal',
                            attributeInvert: 'data-parallax-invert',
                            attributeDelay: 'data-parallax-delay',
                        });

`items?: string\|Element[]`	Selector or array of Elements to parallax. `default:` `".parallax"`
`delay?: number`	Number in milliseconds to apply easing delay. This allows for a smoother animation on non-smooth scrolling devices and might need adjustment based on your needs. Set to 0 to disable. `default:` `0` Override with `attributeDelay`
`minWidth?: number`	Minimum width in pixels of the window to apply effects. Useful if you do not what to apply parallax for smaller devices. `default:` `0` Override with `attributeMinWidth`
`threshold?: number`	The threshold is the buffer in pixels before the parallax element starts to animate before it reaches the viewport. This helps reduce flickering when the element animates from baseline position. You can use a positive number to prevent animation while partially in viewport. `default:` `-300` Override with `attributeThreshold`
`classActive?: string\|string[]`	Class added to element when being viewed by observer and active. Removed when out of view. `default:` `"parallaxing"` Override with `attributeClassActive`
`scrollingElement?: Window\|Element`	The scrolling element that determines the parallaxing. `default:` `window` Override with `attributeScrollingElement`
`attributeMinWidth?: string`	Data attribute to set the minimum width in pixels of the window to apply effects. `default:` `"data-parallax-width"` Overrides `minWidth`
`attributeThreshold?: string`	Data attribute to set the buffer in pixels before the parallax element starts to animate before it reaches the viewport. `default:` `"data-parallax-threshold"` Overrides `threshold`
`attributeScrollingElement?: string`	Data attribute to select the scrolling element. `default:` `"data-parallax-scroller"` Overrides `scrollingElement`
`attributeClassActive?: string`	Data attribute to set the active class when the element is being viewed by observer and active. `default:` `"data-parallax-active"` Overrides `classActive`
`attributeBackground?: string`	Data attribute to indicate that parallaxing should be done on the "background-position" style instead of the element. `default:` `"data-parallax-background"`
`attributeHorizontal?: string`	Data attribute to indicate that parallaxing should be done horizontally instead of vertically. `default:` `"data-parallax-horizontal"`
`attributeInvert?: string`	Data attribute to indicate that parallaxing should be done in the opposite direction. `default:` `"data-parallax-invert"`
`attributeDelay?: string`	Data attribute that sets the value of the delay time. This will override the `delay` option if present and allows for different values per element. `default:` `"data-parallax-delay"` Overrides `delay`

Examples

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Scroll Spy

ScrollSpy watches the scroll position and tracks anchors to linked sections and adds an active class to the anchor when the section is within the viewport.

Usage


                        <!-- ScrollSpy Container -->
                        <div class="scrollspy">
                            <!-- ScrollSpy Anchors -->
                            <a href="#scrollspy-section-1">Section 1 Anchor</a>
                            <a href="#scrollspy-section-2">Section 2 Anchor</a>
                            <a href="#scrollspy-section-3">Section 3 Anchor</a>
                        </div>
                        
                        <!-- ScrollSpy Sections -->
                        <div id="scrollspy-section-1">Section 1 Content</div>
                        <div id="scrollspy-section-2">Section 2 Content</div>
                        <div id="scrollspy-section-3">Section 3 Content</div>

API

Initiate


                        <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>
                        <script>
                            var spryObj = spry('.scrollspy').scrollspy();
                        </script>

See Global Build Query Param Options for additional loading options.


                        <script type="module">
                            import { scrollspy } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            const obj = scrollspy();
                        </script>


                    import { scrollspy } from 'spry-js';
                    const obj = scrollspy();

Update

This allows you to update the objects after Dom changes have been made without duplicating the event listeners. Useful with page builders and other dynamic Dom loading applications.


                    // Update Objects
                    spryObj.scrollspyUpdate();

                    // OR Update All Components
                    spryObj.update();


                    obj.update();


                    obj.update();

Destroy

This allows you to remove all event listeners and added functionality for the objects.


                    // Destroy Objects
                    spryObj.scrollspyDestroy();

                    // OR Destroy All Components
                    spryObj.destroy();


                    obj.destroy();


                    obj.destroy();

Options

Default Options


                        scrollspy({
                            items: '.scrollspy',
                            threshold: 200,
                            progress: 'active',
                            classActive: 'active',
                            scrollingElement: window,
                            replaceHistoryState: false,
                            selectorAnchor: '[href*="#"],[data-scrollspy-section]',
                            attributeReplaceHistoryState: 'data-scrollspy-replace',
                            attributeScrollingElement: 'data-scrollspy-scroller',
                            attributeAnchor: 'data-scrollspy-anchors',
                            attributeClassActive: 'data-scrollspy-active',
                            attributeSection: 'data-scrollspy-section',
                            attributeThreshold: 'data-scrollspy-threshold',
                            attributeProgress: 'data-scrollspy-progress'
                        });

`items?: string\|Element[]`	Selector or array of Elements for scrollspy containers. This will capture scroll events and activate anchors within the container when the section is visible within the viewport. `default:` `".scrollspy"`
`threshold?: number`	The threshold is the buffer in pixels before the anchor is considered active within the viewport. `default:` `200` Override with `attributeThreshold`
`progress?: string`	Type of action to use when activating and deactivated anchors. Options: `"active"` `(default)` This will activate only one anchor at a time. `"linear"` This will progress each anchor based on the position of the scroll. Essentially keeping all previous anchors active while you move forward and removing active anchors as you go back. `"seen"` This will activate each anchor as it is seen, but does not remove any active anchors. Override with `attributeProgress`
`classActive?: string\|string[]`	The class that gets applied to the active anchor. `default:` `"active"` Override with `attributeClassActive`
`scrollingElement?: Window\|Element`	The scrolling element that determines the scrollspy actions. `default:` `window` Override with `attributeScrollingElement`
`replaceHistoryState?: boolean`	Determines whether this scrollspy element should replace the history state in the url. `default:` `false` Override with `attributeReplaceHistoryState`
`selectorAnchor?: string`	Selector for the Scroll Spy Anchors with Hashes within the Containers or attribute that matches `attributeSection`. Any anchors found will then calculate the `attributeSection` first and if nothing is found then it will calculate the hash value from the href url. The url must be a valid url or relative path with a valid window.location.href. `default:` `'[href*="#"],[data-scrollspy-section]'` Override with `attributeAnchor`
`attributeReplaceHistoryState?: string`	Data attribute to set whether this scrollspy element should replace the history state in the url. `default:` `"data-scrollspy-replace"` Overrides `replaceHistoryState`
`attributeScrollingElement?: string`	Data attribute to select the scrolling element. `default:` `"data-scrollspy-scroller"` Overrides `scrollingElement`
`attributeAnchor?: string`	Allows you to use data attributes to specify your own selectors for the anchors within the containers. Uses a selector as its value. `default:` `"data-scrollspy-anchors"` Overrides `selectorAnchor`
`attributeClassActive?: string`	Data attribute to set the class that gets applied to the active anchor. `default:` `"data-scrollspy-active"` Overrides `classActive`
`attributeSection?: string`	This is an alternative to using `selectorAnchor` for your anchors. When using this attribute you can specify a selector for the anchor to connect with instead of using a hash and a section id="". `default:` `"data-scrollspy-section"`
`attributeThreshold?: string`	Data attribute to set the Threshold for the anchors. `default:` `"data-scrollspy-threshold"` Overrides `threshold`
`attributeProgress?: string`	Data attribute to set the Progress type for the anchors. `default:` `"data-scrollspy-progress"` Overrides `progress`

Examples

Section 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section 2

Section 3

Section 4

Section 5

Section 6 Section A

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section B

Section C

Slider

This is a basic slider that leverages the browser's native smooth scrolling feature, resulting in a lightweight codebase. However, it lacks certain functionalities, such as the ability to specify transition speeds or early detection of scroll positioning. For a more robust solution, you may consider exploring alternative options like: Swiper or Glide.

You can add loading="lazy" to the images, but it may be a little choppy when scrolling on some browsers. The Slider will detect the lazy loading images and pre load them on the next and previous slides. If you want a smooth transition it is best to load all the images initially.

Usage


                        <div class="slider" data-snap>
                            <button class="prev link icon prev circle"></button>
                            <button class="next link icon next circle"></button>
                            <div class="slides">
                                <img src="placeholder-1.jpg" loading="lazy">
                                <img src="placeholder-2.jpg" loading="lazy">
                                <img src="placeholder-3.jpg" loading="lazy">
                            </div>
                            <div class="pagination p-3"></div>
                        </div>

API

Initiate


                        <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>
                        <script>
                            var spryObj = spry('.slider').slider();
                        </script>

See Global Build Query Param Options for additional loading options.


                        <script type="module">
                            import { slider } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            const obj = slider();
                        </script>


                    import { slider } from 'spry-js';
                    const obj = slider();

Update

This allows you to update the objects after Dom changes have been made without duplicating the event listeners. Useful with page builders and other dynamic Dom loading applications.


                    // Update Objects
                    spryObj.sliderUpdate();

                    // OR Update All Components
                    spryObj.update();


                    obj.update();


                    obj.update();

Destroy

This allows you to remove all event listeners and added functionality for the objects.


                    // Destroy Objects
                    spryObj.sliderDestroy();

                    // OR Destroy All Components
                    spryObj.destroy();


                    obj.destroy();


                    obj.destroy();

Options

Default Options


                        slider({
                            items: ".slider",
                            classSliding: "sliding",
                            classShowing: "showing",
                            classShowingFirst: "showing-first",
                            classShowingLast: "showing-last",
                            classStart: "slider-start",
                            classEnd: "slider-end",
                            selectorSlides: ".slides",
                            selectorNext: ".next",
                            selectorPrev: ".prev",
                            selectorPagination: ".pagination",
                            attributeClassSliding: "data-slider-class-sliding",
                            attributeClassShowing: "data-slider-class-showing",
                            attributeClassShowingFirst: "data-slider-class-showing-first",
                            attributeClassShowingLast: "data-slider-class-showing-last",
                            attributeClassStart: "data-slider-class-start",
                            attributeClassEnd: "data-slider-class-end",
                            attributeSelectorSlides: "data-slider-selector-slides",
                            attributeSelectorNext: "data-slider-selector-next",
                            attributeSelectorPrev: "data-slider-selector-prev",
                            attributeSelectorPagination: "data-slider-selector-pagination",
                            attributePlay: "data-slider-play",
                            attributeLoop: "data-slider-loop",
                            attributeSnap: "data-slider-snap",
                            attributeStop: "data-slider-stop",
                            attributeEventBeforeSlide: "data-slider-event-before-slide"
                            attributeEventAfterSlide: "data-slider-event-after-slide"
                        });

`items?: string\|Element[]`	Selector or array of Elements for slider containers. `default:` `".slider"`
`classSliding?: string\|string[]`	The Class added to the slider container when the slider is sliding. `default:` `"sliding"` Override with `attributeClassSliding`
`classShowing?: string\|string[]`	A class added to each slide that are viewable in the slider. It is currently only available to switch the showing classes when the slider has finished sliding. `default:` `"showing"` Override with `attributeClassShowing`
`classShowingFirst?: string\|string[]`	A class added to the first viewable slide in the slider. It is currently only set when the slider has finished sliding. `default:` `"showing-first"` Override with `attributeClassShowingFirst`
`classShowingLast?: string\|string[]`	A class added to the last viewable slide in the slider. It is currently only set when the slider has finished sliding. `default:` `"showing-last"` Override with `attributeClassShowingLast`
`classStart?: string\|string[]`	A class added to the slider container when the slider is at the start position. It is currently only set when the slider has finished sliding. * Ignored when Slider has loop enabled `default:` `"slider-start"` Override with `attributeClassStart`
`classEnd?: string\|string[]`	A class added to the slider container when the slider is at the end position. It is currently only set when the slider has finished sliding. * Ignored when Slider has loop enabled `default:` `"slider-end"` Override with `attributeClassEnd`
`selectorSlides?: string`	The selector to set the slides container within the slider container. `default:` `".slides"` Override with `attributeSelectorSlides`
`selectorNext?: string`	The selector to set the next button within the slider container. `default:` `".next"` Override with `attributeSelectorNext`
`selectorPrev?: string`	The selector to set the prev button within the slider container. `default:` `".prev"` Override with `attributeSelectorPrev`
`selectorPagination?: string`	The selector to set the pagination container within the slider container. `default:` `".pagination"` Override with `attributeSelectorPagination`
`attributeClassSliding?: string`	The attribute on the slider container to override the sliding class. `default:` `"data-slider-class-sliding"` Overrides `classSliding`
`attributeClassShowing?: string`	The attribute on the slider container to override the showing class. `default:` `"data-slider-class-showing"` Overrides `classShowing`
`attributeClassShowingFirst?: string`	The attribute on the slider container to override the showing-first class. `default:` `"data-slider-class-showing-first"` Overrides `classShowingFirst`
`attributeClassShowingLast?: string`	The attribute on the slider container to override the showing-last class. `default:` `"data-slider-class-showing-last"` Overrides `classShowingLast`
`attributeClassStart?: string`	The attribute on the slider container to override the start class. `default:` `"data-slider-class-start"` Overrides `classStart`
`attributeClassEnd?: string`	The attribute on the slider container to override the end class. `default:` `"data-slider-class-end"` Overrides `classEnd`
`attributeSelectorSlides?: string`	The attribute on the slider container to override the slides selector. `default:` `"data-slider-selector-slides"` Overrides `selectorSlides`
`attributeSelectorNext?: string`	The attribute on the slider container to override the next selector. `default:` `"data-slider-selector-next"` Overrides `selectorNext`
`attributeSelectorPrev?: string`	The attribute on the slider container to override the prev selector. `default:` `"data-slider-selector-prev"` Overrides `selectorPrev`
`attributeSelectorPagination?: string`	The attribute on the slider container to override the pagination selector. `default:` `"data-slider-selector-pagination"` Overrides `selectorPagination`
`attributePlay?: string`	The attribute on the slider container to set the play value. `default:` `"data-slider-play"` Usage: `data-slider-play="{n}"` `n:` `number` Enable autoplay in milliseconds.
`attributeLoop?: string`	The attribute on the slider container to enable loop. Loop enables the slider to loop through the slides. * This duplicates the slides for the previous and next sections which can cause side effects. You can use the `destroy` method to remove the duplicate sections when no longer needing the slider functionality. `default:` `"data-slider-loop"`
`attributeSnap?: string`	The attribute on the slider container to enable snap. Snap activates the slider to move one slide at a time instead of then entire viewable slides. `default:` `"data-slider-snap"`
`attributeStop?: string`	The attribute on the slider container to set the stop value. Stop activates the slider to pause "play" when the slider has a specific state. `default:` `"data-slider-stop"` Usage: `data-slider-stop="{enum}"` enum Options: `hover` - Pause play while hovering over slider `action` - Pause play while hovering over a link, button or making a text selection within the slider.
`attributeEventBeforeSlide?: string`	The attribute on the slider container to call the Before Slide Event. This only accepts a string as the name of the global function to call. It does not support inline functions. `default:` `"data-slider-event-before-slide"` See the Before Slide Event on how to use.
`attributeEventAfterSlide?: string`	The attribute on the slider container to call the After Slide Event. This only accepts a string as the name of the global function to call. It does not support inline functions. `default:` `"data-slider-event-after-slide"` See the After Slide Event on how to use.

Methods

sliderGoTo(index: int|string)

index can either be a int of the index or one of ("next"|"prev")

Typescript Example:


                                        const slider = slider('#my-slider'); // Create New Slider
                                        slider.sliderGoTo(2);


                                        const slider = spry.slider('#my-slider'); // Create New Slider
                                        slider.sliderGoTo(2);


                                        const slider = slider('#my-slider'); // Create New Slider
                                        slider.sliderGoTo(2);

DOM Example:


                                        const slider = document.getElementById('my-slider'); // Get Slider from Dom
                                        slider.sliderGoTo('next');

sliderGetIndex()

Retrieves the current index of the slider

Typescript Example:


                                        const slider = slider('#my-slider'); // Create New Slider
                                        const currentIndex = slider.sliderGetIndex();


                                        const slider = spry.slider('#my-slider'); // Create New Slider
                                        const currentIndex = slider.sliderGetIndex();


                                        const slider = slider('#my-slider'); // Create New Slider
                                        const currentIndex = slider.sliderGetIndex();

DOM Example:


                                        const slider = document.getElementById('my-slider'); // Get Slider from Dom
                                        const currentIndex = slider.sliderGetIndex();

sliderUpdate()

Destroys and Rebuilds the Slider. Useful if adding/removing slides / setting slides to display `none` etc.

Typescript Example:


                                        const slider = slider('#my-slider'); // Create New Slider
                                        slider.sliderUpdate();


                                        const slider = spry.slider('#my-slider'); // Create New Slider
                                        slider.sliderUpdate();


                                        const slider = slider('#my-slider'); // Create New Slider
                                        slider.sliderUpdate();

DOM Example:


                                        const slider = document.getElementById('my-slider'); // Get Slider from Dom
                                        slider.sliderUpdate();

Events

beforeSlide(currentIndex: int, toIndex: int|null)

Event called before the slider starts sliding.

currentIndex: Integer of current slide before sliding

toIndex: Integer of index set to slide to. NULL if free form sliding.

Event Listener Name

spryjs-slider-event-before-slide

* Only applicable on the slider element

Attribute

data-slider-event-before-slide

See attributeEventBeforeSlide for more details.

Typescript Example:


                                        const slider = slider('#my-slider'); // Create New Slider
                                        slider.addEventListener('spryjs-slider-event-before-slide', (eventInfo) => {
                                            console.log(eventInfo.detail.currentIndex, eventInfo.detail.toIndex);
                                        });


                                        const slider = spry.slider('#my-slider'); // Create New Slider
                                        slider.addEventListener('spryjs-slider-event-before-slide', (eventInfo) => {
                                            console.log(eventInfo.detail.currentIndex, eventInfo.detail.toIndex);
                                        });


                                        const slider = slider('#my-slider'); // Create New Slider
                                        slider.addEventListener('spryjs-slider-event-before-slide', (eventInfo) => {
                                            console.log(eventInfo.detail.currentIndex, eventInfo.detail.toIndex);
                                        });

Attribute Example:


                                        <script>
                                            function myBeforeSlideEvent(currentIndex, toIndex) {
                                                console.log(currentIndex, toIndex);
                                            }
                                        </script>

                                        <div class="slider" data-slider-event-before-slide="myBeforeSlideEvent">
                                            <button class="prev link icon prev circle"></button>
                                            <button class="next link icon next circle"></button>
                                            <div class="slides">
                                                <img src="placeholder-1.jpg" loading="lazy">
                                                <img src="placeholder-2.jpg" loading="lazy">
                                                <img src="placeholder-3.jpg" loading="lazy">
                                            </div>
                                            <div class="pagination p-3"></div>
                                        </div>

afterSlide(currentIndex: int)

Event called when the slider has finished sliding.

currentIndex: Integer of current slide after finished sliding

Event Listener Name

spryjs-slider-event-after-slide

* Only applicable on the slider element

Attribute

data-slider-event-after-slide

See attributeEventAfterSlide for more details.

Typescript Example:


                                        const slider = slider('#my-slider'); // Create New Slider
                                        slider.addEventListener('spryjs-slider-event-after-slide', (eventInfo) => {
                                            console.log(eventInfo.detail.currentIndex);
                                        });


                                        const slider = spry.slider('#my-slider'); // Create New Slider
                                        slider.addEventListener('spryjs-slider-event-after-slide', (eventInfo) => {
                                            console.log(eventInfo.detail.currentIndex);
                                        });


                                        const slider = slider('#my-slider'); // Create New Slider
                                        slider.addEventListener('spryjs-slider-event-after-slide', (eventInfo) => {
                                            console.log(eventInfo.detail.currentIndex);
                                        });

Attribute Example:


                                        <script>
                                            function myAfterSlideEvent(currentIndex) {
                                                console.log(currentIndex);
                                            }
                                        </script>

                                        <div class="slider" data-slider-event-after-slide="myAfterSlideEvent">
                                            <button class="prev link icon prev circle"></button>
                                            <button class="next link icon next circle"></button>
                                            <div class="slides">
                                                <img src="placeholder-1.jpg" loading="lazy">
                                                <img src="placeholder-2.jpg" loading="lazy">
                                                <img src="placeholder-3.jpg" loading="lazy">
                                            </div>
                                            <div class="pagination p-3"></div>
                                        </div>

Examples

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

Image 8

Image 9

Image 10

Image 11

Image 12

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

Image 8

Image 9

Image 10

Image 11

Image 12

Toggle

Toggles are a way to toggle an element ON or OFF

Usage


                        <!-- Toggle Activator -->
                        <button data-toggle="#toggle-container-1">Click Me</button>
                        
                        <!-- Toggle Element -->
                        <div id="toggle-container-1">Toggle Me</div>

API

Initiate


                        <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>
                        <script>
                            var spryObj = spry('.toggle').toggle();
                        </script>

See Global Build Query Param Options for additional loading options.


                        <script type="module">
                            import { toggle } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            const obj = toggle();
                        </script>


                    import { toggle } from 'spry-js';
                    const obj = toggle();

Update

This allows you to update the objects after Dom changes have been made without duplicating the event listeners. Useful with page builders and other dynamic Dom loading applications.


                    // Update Objects
                    spryObj.toggleUpdate();

                    // OR Update All Components
                    spryObj.update();


                    obj.update();


                    obj.update();

Destroy

This allows you to remove all event listeners and added functionality for the objects.


                    // Destroy Objects
                    spryObj.toggleDestroy();

                    // OR Destroy All Components
                    spryObj.destroy();


                    obj.destroy();


                    obj.destroy();

Options

Default Options


                        toggle({
                            items: '[data-toggle], [data-toggle-close]',
                            classOpen: 'open',
                            classActive: 'active',
                            attributeClassOpen: 'data-toggle-class-open',
                            attributeClassActive: 'data-toggle-class-active',
                            attributeToggle: 'data-toggle',
                            attributeClose: 'data-toggle-close',
                            attributeOpen: 'data-toggle-open',
                            attributeEscapable: 'data-toggle-escapable',
                            attributeDismissible: 'data-toggle-dismissible',
                            attributeTimeout: 'data-toggle-timeout'
                        });

`items?: string\|Element[]`	Selector or array of Elements for toggles. `default:` `"[data-toggle], [data-toggle-close]"`
`classOpen?: string\|string[]`	The class that gets applied to an opened toggled element. `default:` `"open"` Override with `attributeClassOpen`
`classActive?: string\|string[]`	The class that gets applied to an active toggler element. `default:` `"active"` Override with `attributeClassActive`
`attributeClassOpen?: string`	The attribute to define the open class of the toggle element when opened. `default:` `"data-toggle-class-open"` Overrides `classOpen`
`attributeClassActive?: string`	The attribute to define the active class of the toggler element when active. `default:` `"data-toggle-class-active"` Overrides `classActive`
`attributeToggle?: string`	Specifies the attribute used to determine what element needs to be toggled. The value of the attribute is used as the selector for the element to toggle. Ex: `data-toggle="selector"` `default:` `"data-toggle"` `selector` can be: Any css selector as a string. See Special Selector Values for additional values. `"next"` - which will be the nextElementSibling `"prev"` - which will be the previousElementSibling `empty` - If empty or excluded then it will toggle itself.
`attributeClose?: string`	Specifies the attribute used to determine what toggled elements need to be closed before performing any other toggle actions. The value of the attribute is used as the selector for the element to close. Ex: `data-toggle-close="selector"` `default:` `"data-toggle-close"` `selector` can be: Any css selector as a string. See Special Selector Values for additional values. `"next"` - which will be the nextElementSibling `"prev"` - which will be the previousElementSibling `empty` - If empty or excluded then it will try to close itself only if itself is a toggled element. * Otherwise, it will search for the closest ancestor toggled element to close.
`attributeOpen?: string`	Specifies the attribute used to determine what toggled elements need to be opened after performing any other toggle actions. The value of the attribute is used as the selector for the element to open. Ex: `data-toggle-open="selector"` `default:` `"data-toggle-open"` `selector` can be: Any css selector as a string. See Special Selector Values for additional values. `"next"` - which will be the nextElementSibling `"prev"` - which will be the previousElementSibling `empty` - If empty or excluded then it will try to open itself only if itself is a toggled element. * Otherwise, it will search for the closest ancestor toggled element to open.
`attributeEscapable?: string`	This attribute allows the toggled element to close when the ESC Keyboard button is pressed. This needs to be on the toggler and not the Toggled element. Keep in mind that when using multiple togglers they might override each other. `default:` `"data-toggle-escapable"`
`attributeDismissible?: string`	This attribute allows the toggled element to close when the ESC Keyboard button is pressed or when clicking outside the Toggled Element. This needs to be on the toggler and not the Toggled element. Keep in mind that when using multiple togglers they might override each other. `default:` `"data-toggle-dismissible"`
`attributeTimeout?: string`	This attribute allows the toggled element to close in a specified time in milliseconds. This needs to be on the toggler and not the Toggled element. Keep in mind that when using multiple togglers they might override each other. EX. `data-toggle-timeout="n"` `n` is the time in milliseconds `default:` `"data-toggle-timeout"`

Special Selector Values
`{closest-selector}` Starting your selector with curly brackets `{...}` will use its value to select the closest node. This is only allowed at the very start of your selector. Example: `"{.container} ul li button"` Is equivalent to: `this.closest('.container').querySelectorAll('ul li button');`
`{n}` Using `{n}` will get replaced with the current nodes index value. Example: `"ul li:nth-child({n}) > div"` Is equivalent to: `var nodeIndex = Array.from(this.parentElement.children).indexOf(this); document.querySelectorAll('ul li:nth-child('+(nodeIndex+1)+') > div');` Example: `"{.container} ul li:nth-child({n}) > div"` Is equivalent to: `var nodeIndex = Array.from(this.parentElement.children).indexOf(this); this.closest('.container').querySelectorAll('ul li:nth-child('+(nodeIndex+1)+') > div');`

Special Selector Values

{closest-selector}

Starting your selector with curly brackets {...} will use its value to select the closest node. This is only allowed at the very start of your selector.

Example: "{.container} ul li button"

Is equivalent to:


                                        this.closest('.container').querySelectorAll('ul li button');

{n}

Using {n} will get replaced with the current nodes index value.

Example: "ul li:nth-child({n}) > div"

Is equivalent to:


                                        var nodeIndex = Array.from(this.parentElement.children).indexOf(this);
                                        document.querySelectorAll('ul li:nth-child('+(nodeIndex+1)+') > div');

Example: "{.container} ul li:nth-child({n}) > div"

Is equivalent to:


                                        var nodeIndex = Array.from(this.parentElement.children).indexOf(this);
                                        this.closest('.container').querySelectorAll('ul li:nth-child('+(nodeIndex+1)+') > div');

Examples

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. Nonumy eirmod tempor invidunt ut labore et dolore magna erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Sed diam nonumy eirm Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.

Tab 1 content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tab 2 content. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tab 3 asldkf

Cookie

SpryJS Cookie is for basic cookie manipulation. Paths are automatically set by the Host domain and are HTTP enabled. If you need advanced functionality then you will need to look into other methods like Server Side cookie manipulation.

API

Initiate


                            <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>

See Global Build Query Param Options for additional loading options.


                            <script type="module">
                                import { cookie } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            </script>


                            import { cookie } from 'spry-js';

get

/**
* Get a Cookie
*
* @param cookieName: string
* The name of the cookie to get. Value will be URI and JSON decoded.
* 
* @returns string
*/


                        const value = spry.cookie.get(cookieName);


                        const value = cookie.get(cookieName);


                        const value = cookie.get(cookieName);

set

/**
* Set a Cookie
* Uses path=/ and Secure (https only)
*
* @param cookieName: string
* The cookie name to set.
* 
* @param cookieValue: string|number|object
* The value to set. Value will be JSON and URI encoded.
* 
* @param expireSeconds?: number
* Number in seconds to expire. 0 or undefined = Session expire.
* 
* @returns void
*/


                        spry.cookie.set(cookieName, cookieValue, expireSeconds);


                        cookie.set(cookieName, cookieValue, expireSeconds);


                        cookie.set(cookieName, cookieValue, expireSeconds);

remove

/**
* Remove a Cookie
*
* @param cookieName: string
* The cookie name to remove. This will set the cookie value to empty and expire immediately.
* 
* @returns void
*/


                        spry.cookie.remove(cookieName);


                        cookie.remove(cookieName);


                        cookie.remove(cookieName);


                            <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>

See Global Build Query Param Options for additional loading options.


                            <script type="module">
                                import { hash } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            </script>


                            import { hash } from 'spry-js';

md5

/**
* Get an MD5 hash
*
* @param inputString: string|number|object
* The value to hash. Objects will be converted to JSON strings before they are hashed.
* 
* @returns string
*/


                        const value = spry.hash.md5(inputString);


                        const value = hash.md5(inputString);


                        const value = hash.md5(inputString);

sha256

/**
* Get an SHA256 hash
*
* @param inputString: string|number|object
* The value to hash. Objects will be converted to JSON strings before they are hashed.
* 
* @returns string
*/


                        const value = spry.hash.sha256(inputString);


                        const value = hash.sha256(inputString);


                        const value = hash.sha256(inputString);


                            <script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.js"></script>

See Global Build Query Param Options for additional loading options.


                            <script type="module">
                                import { query } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@1.1.4/dist/spry.mjs';
                            </script>


                            import { query } from 'spry-js';

query

/**
* Query or Set a Collection of Elements
*
* @param selector: string|Element|Element[]
* The String to Query for the Elements. Or Set the Collection Elements by passing an Element or array of Elements.
*
* @param findSelector?: string
* Useful when assigning an Element or array of Elements as the selector. Like Element.closest(findSelector).
* If `selector` is an array of Elements the findSelector will query each Element in the array to add to the Collection.
* 
* @returns SpryJsQueryCollection
*/


                        spry.query('.selector')...
                        
                        // Alias
                        spry('.selector')...


                        query('.selector')...


                        query('.selector')...

Returns `SpryJsQueryCollection`


                    {
                        elements,
                        el, // Alias for first Element
                        ...methods // See below for a list of all Methods
                    }

chaining

Example Usage with chainable methods


                        spry.query('.selector').addClass('stuff').attr('data-stuff', 'things');

                        // Alias
                        spry('.selector').addClass('stuff').attr('data-stuff', 'things');


                        query('.selector').addClass('stuff').attr('data-stuff', 'things');


                        query('.selector').addClass('stuff').attr('data-stuff', 'things');

setting

Setting the Collection Elements


                        spry.query(myElementOrArrayOfElements).addClass('stuff').attr('data-stuff', 'things');

                        // Alias
                        spry(myElementOrArrayOfElements).addClass('stuff').attr('data-stuff', 'things');


                        query(myElementOrArrayOfElements).addClass('stuff').attr('data-stuff', 'things');


                        query(myElementOrArrayOfElements).addClass('stuff').attr('data-stuff', 'things');

reference

Querying from a Reference


                        spry.query(myReferenceElementOrArrayOfElements, '.findSelector').addClass('stuff').attr('data-stuff', 'things');

                        // Alias
                        spry(myReferenceElementOrArrayOfElements, '.findSelector').addClass('stuff').attr('data-stuff', 'things');


                        query(myReferenceElementOrArrayOfElements, '.findSelector').addClass('stuff').attr('data-stuff', 'things');


                        query(myReferenceElementOrArrayOfElements, '.findSelector').addClass('stuff').attr('data-stuff', 'things');

resetting

Resetting the Query Elements by calling Query again.


                        spry.query('a').addClass('color-primary').query('button').addClass('color-secondary');

                        // Alias
                        spry('a').addClass('color-primary').query('button').addClass('color-secondary');


                        query('a').addClass('color-primary').query('button').addClass('color-secondary');


                        query('a').addClass('color-primary').query('button').addClass('color-secondary');

Items

elements

/**
 * Element[] - Array of Elements currently in Collection.
 */


                        spry.query('.selector').elements;

                        // Alias
                        spry('.selector').elements;


                        query('.selector').elements;


                        query('.selector').elements;

el

/**
 * Element - First Element currently in Collection.
 * Alias of elements[0]
 *
 */


                        spry.query('.selector').el;

                        // Alias
                        spry('.selector').el;


                        query('.selector').el;


                        query('.selector').el;

Methods

addClass

/**
 * Add Class(s) to elements in Collection
 *
 * @param className: string|string[] - The class(s) to add.
 * 
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').addClass(className);

                        // Alias
                        spry('.selector').addClass(className);


                        query('.selector').addClass(className);


                        query('.selector').addClass(className);

toggleClass

/**
* Toggle Class(s) on elements in Collection
*
* @param className: string|string[]
* The class(s) to toggle.
* 
* @param force?: boolean|string[]
* Force true to add class or false to remove class.
* Undefined will check to determine toggle state.
* 
* @returns SpryJsQueryCollection
*/


                        spry.query('.selector').toggleClass(className, force);

                        // Alias
                        spry('.selector').toggleClass(className, force);


                        query('.selector').toggleClass(className, force);


                        query('.selector').toggleClass(className, force);

removeClass

/**
 * Remove Class(s) from elements in collection
 *
 * @param className: string|string[] - The class(s) to remove.
 * 
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').removeClass(className);
                        
                        // Alias
                        spry('.selector').removeClass(className);


                        query('.selector').removeClass(className);


                        query('.selector').removeClass(className);

hasClass

/**
 * Check if Element(s) have Class(es). All need to be true. Otherwise false.
 *
 * @param className: string|string[] - The class(s) to remove.
 * 
 * @returns boolean
 */


                        spry.query('.selector').hasClass(className);

                        // Alias
                        spry('.selector').hasClass(className);


                        query('.selector').hasClass(className);


                        query('.selector').hasClass(className);

attr

/**
 * Set the Attribute name and value on elements in collection
 *
 * @param attributeName:  string - Attribute name to Set.
 * @param attributeValue: string - Attribute value to Set. If empty it will default to a blank string "".
 * 
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').attr(attributeName, attributeValue);

                        // Alias
                        spry('.selector').attr(attributeName, attributeValue);


                        query('.selector').attr(attributeName, attributeValue);


                        query('.selector').attr(attributeName, attributeValue);

toggleAttr

/**
* Toggle Attribute(s) on elements in collection
*
* @param attributeName: string|string[]
* Attribute names to toggle.
*
* @param force?: boolean
* Force true to add Attribute or false to remove Attribute.
* Undefined will check to determine toggle state.
* 
* @returns SpryJsQueryCollection
*/


                        spry.query('.selector').toggleAttr(attributeName, force);

                        // Alias
                        spry('.selector').toggleAttr(attributeName, force);


                        query('.selector').toggleAttr(attributeName, force);


                        query('.selector').toggleAttr(attributeName, force);

removeAttr

/**
 * Remove Attribute(s) from elements in collection
 *
 * @param attributeName: string|string[] - The Attribute(s) to remove.
 * 
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').removeAttr(attributeName);

                        // Alias
                        spry('.selector').removeAttr(attributeName);


                        query('.selector').removeAttr(attributeName);


                        query('.selector').removeAttr(attributeName);

on

/**
 * Add an event listener to all elements within the collection
 *
 * @param type: string
 * Event Type to listen for.
 *
 * @param listener: EventListenerOrEventListenerObject
 * Callback Listener or Event Listener Object to apply on event.
 * 
 * @param options?: AddEventListenerOptions
 * Additional Event Listener Options.
 * 
 * @returns SpryJsQueryCollection
 * 
 * For more details see: MDN addEventListener
 */


                        spry.query('.selector').on(type, listener, options);

                        // Alias
                        spry('.selector').on(type, listener, options);


                        query('.selector').on(type, listener, options);


                        query('.selector').on(type, listener, options);

off

/**
 * Remove an event listener on all elements within the collection
 *
 * @param type: string
 * Event Type to Remove.
 *
 * @param listener: EventListenerOrEventListenerObject
 * Callback Listener or Event Listener Object to remove.
 * 
 * @param options?: AddEventListenerOptions
 * Additional Event Listener Options.
 * 
 * @returns SpryJsQueryCollection
 * 
 * For more details see: MDN removeEventListener
 */


                        spry.query('.selector').off(type, listener, options);

                        // Alias
                        spry('.selector').off(type, listener, options);


                        query('.selector').off(type, listener, options);


                        query('.selector').off(type, listener, options);

each

/**
 * Loop through each element in the collection
 *
 * @param callbackFn: Function - Callback function to apply to each element in the Collection.
 * Callback provides (el: Element, index: number)
 * 
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').each(callbackFn);

                        // Alias
                        spry('.selector').each(callbackFn);


                        query('.selector').each(callbackFn);


                        query('.selector').each(callbackFn);

index

/**
 * Resets the collection to a single element by index
 *
 * @param i: number - Index of element. Does not allow for negative numbers.
 * # Warning - If index does not exit in the collection then elements in collection will be truncated.
 * 
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').index(i);

                        // Alias
                        spry('.selector').index(i);


                        query('.selector').index(i);


                        query('.selector').index(i);

nth

/**
 * Resets the collection to a single element by nth selector
 *
 * @param n: number - Nth Selector. This is index + 1. So first item would be 1 not 0.
 * Allows for inverse lookup with negative numbers. So -1 is the last item in the collection.
 * # Warning - If index does not exit in the collection then elements in collection will be truncated.
 * 
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').nth(n);

                        // Alias
                        spry('.selector').nth(n);


                        query('.selector').nth(n);


                        query('.selector').nth(n);

first

/**
 * Resets the collection to the first element in Collection.
 * Alias of nth(1)
 *
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').first();

                        // Alias
                        spry('.selector').first();


                        query('.selector').first();


                        query('.selector').first();

last

/**
 * Resets the collection to the last element in Collection.
 * Alias of nth(-1)
 *
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').last();

                        // Alias
                        spry('.selector').last();


                        query('.selector').last();


                        query('.selector').last();

slice

/**
 * Resets the collection to a range by index.
 * Both parameters can use Negative numbers to indicate an offset from the end.
 *
 * @param start:  number - Start index of Range.
 * @param end?:   number - End index of range.
 * # Warning - Invalid params could lead to a truncated collection.
 *
 * @returns SpryJsQueryCollection
 */


                        spry.query('.selector').slice(start, end);

                        // Alias
                        spry('.selector').slice(start, end);


                        query('.selector').slice(start, end);


                        query('.selector').slice(start, end);

filter

/**
 * Resets the collection to a range by index.
 * Both parameters can use Negative numbers to indicate an offset from the end.
 *
 * @param callbackFn: Function - Callback Function to check collection against.
 * callbackFn provides (value: Element, index: number, array: Element[]) and must return boolean
 *
 * @param thisArg?: object - A value to use as this when executing callbackFn.
 *
 * @returns SpryJsQueryCollection
 *
 * For more details see: MDN Array.prototype.filter()
 */


                        spry.query('.selector').filter(callbackFn);
                        
                        // Alias
                        spry('.selector').filter(callbackFn);


                        query('.selector').filter(callbackFn);


                        query('.selector').filter(callbackFn);

SpryJS

API CDN ES Module Build CDN Global Build Node

API CDN ES Module Build CDN Global Build Node

API CDN ES Module Build CDN Global Build Node

API CDN ES Module Build CDN Global Build Node

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section A

Section B

Section C

API CDN ES Module Build CDN Global Build Node

Event Listener Name

Attribute

Event Listener Name

Attribute

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

Image 8

Image 9

Image 10

Image 11

Image 12

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

Image 8

Image 9

Image 10

Image 11

Image 12

API CDN ES Module Build CDN Global Build Node

API CDN ES Module Build CDN Global Build Node

API CDN ES Module Build CDN Global Build Node

API CDN ES Module Build CDN Global Build Node

Returns SpryJsQueryCollection

Example Usage with chainable methods

Setting the Collection Elements

Querying from a Reference

Resetting the Query Elements by calling Query again.

Copy Failed!

API

API

API

API

API

API

API

API

API

Returns `SpryJsQueryCollection`