SpryJS

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 SpryJS from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.mjs'; SpryJS('.something').addClass('open'); </script>

Using Partials

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

Using the CDN Global Build

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

Usage

<script> // Run after dom ready SpryJS('.something').addClass('open'); </script> <!-- OR Inline --> <button onclick="SpryJS('.something').toggleClass('open')"> Click Me </button>

Global Build Query Param Options

load

Automatically load SpryJS to a variable you specify and initialize all components with default options.

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

You then have access to your variable when the Dom has been loaded.

<button onclick="spryJs.query('.something').toggleClass('open')"> Click Me </button>

run

Run a function you specify when SpryJS is fully loaded.

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

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 defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js?load=spryJs"></script>
* var spryJsis automatically created and loads all components with default options. You can customize the variable in the src of the script.
<script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js"></script> <script> var spryObj = SpryJS('.observe').observe(); </script>
<script type="module"> import { observe } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/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 spryJs.observeUpdate(); // OR Update All Components spryJs.update();
// 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 spryJs.observeDestroy(); // OR Destroy All Components spryJs.destroy();
// Destroy Objects spryObj.observeDestroy(); // OR Destroy All Components spryObj.destroy();
obj.destroy();
obj.destroy();

Options

Default Options

observe({ items: '.observe', rootMargin: '0px 0px 0px 0px', threshold: 0, delay: 50, 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"
rootMargin?: string

Bounding box before computing intersections. Negative values will shrink the bounding box.

default: "0px 0px 0px 0px"

Learn more about rootMargin
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
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
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 defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js?load=spryJs"></script>
* var spryJsis automatically created and loads all components with default options. You can customize the variable in the src of the script.
<script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js"></script> <script> var spryObj = SpryJS('.parallax').parallax(); </script>
<script type="module"> import { parallax } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/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 spryJs.parallaxUpdate(); // OR Update All Components spryJs.update();
// 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 spryJs.parallaxDestroy(); // OR Destroy All Components spryJs.destroy();
// Destroy Objects spryObj.parallaxDestroy(); // OR Destroy All Components spryObj.destroy();
obj.destroy();
obj.destroy();

Options

Default Options

parallax({ items: '.parallax', threshold: -300, minWidth: 0, delay: 300, classActive: 'parallaxing', attributeClassActive: 'data-parallax-class-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"
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
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
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
classActive?: string|string[]

Class added to element when being viewed by observer and active. Removed when out of view.

default: "parallaxing"

Override with attributeClassActive
attributeClassActive?: string

Data attribute to set the active class when the element is being viewed by observer and active.

default: "data-parallax-class-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

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.

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

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

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 defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js?load=spryJs"></script>
* var spryJsis automatically created and loads all components with default options. You can customize the variable in the src of the script.
<script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js"></script> <script> var spryObj = SpryJS('.scrollspy').scrollspy(); </script>
<script type="module"> import { scrollspy } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/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 spryJs.scrollspyUpdate(); // OR Update All Components spryJs.update();
// 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 spryJs.scrollspyDestroy(); // OR Destroy All Components spryJs.destroy();
// 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', selectorAnchor: '[href*="#"],[data-scrollspy-section]', attributeAnchor: 'data-scrollspy-anchors', attributeClassActive: 'data-scrollspy-class-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
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
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-class-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

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 3

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 4

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 5

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 6

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 A

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.

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

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.

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 C

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.

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.

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 defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js?load=spryJs"></script>
* var spryJsis automatically created and loads all components with default options. You can customize the variable in the src of the script.
<script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js"></script> <script> var spryObj = SpryJS('.slider').slider(); </script>
<script type="module"> import { slider } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/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 spryJs.sliderUpdate(); // OR Update All Components spryJs.update();
// 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 spryJs.sliderDestroy(); // OR Destroy All Components spryJs.destroy();
// 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", attributeEventSlide: "data-slider-event-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.
attributeEventSlide?: string

The attribute on the slider container to call the 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-slide"

See the 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 = SpryJS.slider('#my-slider'); // Create New Slider slider.sliderGoTo(2);
const slider = spryJs.slider('#my-slider'); // Create New Slider slider.sliderGoTo(2);
const slider = slider('#my-slider'); // Create New Slider slider.sliderGoTo(2);

DOM Example:
sliderGetIndex()

Retrieves the current index of the slider

Typescript Example:

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

DOM Example:

Events

slide(index: int)

Event called when the slider has finished sliding.

Event Listener Name
spryjs-slider-event-slide

* Only applicable on the slider element

Attribute
data-slider-event-slide

See attributeEventSlide for more details.

Typescript Example:

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

Attribute Example:

Examples

Placeholder Image Placeholder Image Placeholder Image
Image 1
Placeholder Image
Image 2
Placeholder Image
Image 3
Placeholder Image
Image 4
Placeholder Image
Image 5
Placeholder Image
Image 6
Placeholder Image
Image 7
Placeholder Image
Image 8
Placeholder Image
Image 9
Placeholder Image
Image 10
Placeholder Image
Image 11
Placeholder Image
Image 12
Placeholder Image
Image 1
Placeholder Image
Image 2
Placeholder Image
Image 3
Placeholder Image
Image 4
Placeholder Image
Image 5
Placeholder Image
Image 6
Placeholder Image
Image 7
Placeholder Image
Image 8
Placeholder Image
Image 9
Placeholder Image
Image 10
Placeholder Image
Image 11
Placeholder Image
Image 12
Placeholder Image
Placeholder Image Placeholder Image Placeholder Image Placeholder Image Placeholder Image Placeholder Image Placeholder Image Placeholder Image Placeholder Image

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 defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js?load=spryJs"></script>
* var spryJsis automatically created and loads all components with default options. You can customize the variable in the src of the script.
<script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js"></script> <script> var spryObj = SpryJS('.toggle').toggle(); </script>
<script type="module"> import { toggle } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/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 spryJs.toggleUpdate(); // OR Update All Components spryJs.update();
// 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 spryJs.toggleDestroy(); // OR Destroy All Components spryJs.destroy();
// 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:
{n} Using {n} will get replaced with the current nodes index value.

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

Is equivalent to:

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

Is equivalent to:

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.

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.

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.

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

Tab 4 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.
Tab 5 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 6 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.

Hash

SpryJS Hash is for basic hashing and requires unicode safe characters. Objects will be converted to JSON strings before they are hashed.
SpryJS Hash is not for encryption or secured data. If you need to ensure data safety or a stronger digest then you may want to look at SubtleCrypto

API

Initiate

<script defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js?load=spryJs"></script>
* var spryJsis automatically created and loads all components with default options. You can customize the variable in the src of the script.
<script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js"></script>
<script type="module"> import { hash } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/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 = spryJs.hash.md5(inputString);
const value = SpryJS.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 = spryJs.hash.sha256(inputString);
const value = SpryJS.hash.sha256(inputString);
const value = hash.sha256(inputString);
const value = hash.sha256(inputString);

Query

The query object is a simple lightweight tool to help you with some basic dom manipulations.

API

Initiate

<script defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js?load=spryJs"></script>
* var spryJsis automatically created and loads all components with default options. You can customize the variable in the src of the script.
<script src="https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.js"></script>
<script type="module"> import { query } from 'https://cdn.jsdelivr.net/gh/ggedde/spry-js@x.x.x/dist/spry.mjs'; </script>
import { query } from 'spry-js';
Returns SpryJsQueryCollection
{ elements, ...methods }
Example Usage with chainable methods
spryJs.query('.selector').addClass('stuff').attr('data-stuff', 'things');
SpryJS.query('.selector').addClass('stuff').attr('data-stuff', 'things');
query('.selector').addClass('stuff').attr('data-stuff', 'things');
query('.selector').addClass('stuff').attr('data-stuff', 'things');

Items

elements

/** * Element[] - Array of Elements currently in Collection. */
spryJs.query('.selector').elements;
SpryJS.query('.selector').elements;
query('.selector').elements;
query('.selector').elements;

el

/** * Element - First Element currently in Collection. * Alias of elements[0] * */
spryJs.query('.selector').el;
SpryJS.query('.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 */
spryJs.query('.selector').addClass(className);
SpryJS.query('.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 */
spryJs.query('.selector').toggleClass(className, force);
SpryJS.query('.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 */
spryJs.query('.selector').removeClass(className);
SpryJS.query('.selector').removeClass(className);
query('.selector').removeClass(className);
query('.selector').removeClass(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 */
spryJs.query('.selector').attr(attributeName, attributeValue);
SpryJS.query('.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 */
spryJs.query('.selector').toggleAttr(attributeName, force);
SpryJS.query('.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 */
spryJs.query('.selector').removeAttr(attributeName);
SpryJS.query('.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 */
spryJs.query('.selector').on(type, listener, options);
SpryJS.query('.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 */
spryJs.query('.selector').off(type, listener, options);
SpryJS.query('.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 */
spryJs.query('.selector').each(callbackFn);
SpryJS.query('.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 */
spryJs.query('.selector').index(i);
SpryJS.query('.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 */
spryJs.query('.selector').nth(n);
SpryJS.query('.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 */
spryJs.query('.selector').first();
SpryJS.query('.selector').first();
query('.selector').first();
query('.selector').first();

last

/** * Resets the collection to the last element in Collection. * Alias of nth(-1) * * @returns SpryJsQueryCollection */
spryJs.query('.selector').last();
SpryJS.query('.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 */
spryJs.query('.selector').slice(start, end);
SpryJS.query('.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() */
spryJs.query('.selector').filter(callbackFn);
SpryJS.query('.selector').filter(callbackFn);
query('.selector').filter(callbackFn);
query('.selector').filter(callbackFn);