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.
<script>
// Run after dom ready
SpryJS('.something').addClass('open');
</script>
<!-- OR Inline -->
<button onclick="SpryJS('.something').toggleClass('open')">
Click Me
</button>
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.
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.navigableUpdate();
// OR Update All Components
spryJs.update();
// Update Objects
spryObj.navigableUpdate();
// OR Update All Components
spryObj.update();
obj.update();
obj.update();
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.
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();
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.
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.
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.
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();
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.
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.
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.
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.
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();
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.
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.
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.
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="".
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.
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.
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.
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.
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.
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();
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.
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.
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();
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.
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.
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');
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.
Tab 3 asldkf
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.
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.
/**
* Set a Cookie
*
* @paramcookieName:string
* The cookie name to set.
*
* @paramcookieValue:string|number|object
* The value to set. Value will be JSON and URI encoded.
*
* @paramexpireSeconds?:number
* Number in seconds to expire. 0 or undefined = Session expire.
*
* @returnsvoid
*/
/**
* Remove a Cookie
*
* @paramcookieName:string
* The cookie name to remove. This will set the cookie value to empty and expire immediately.
*
* @returnsvoid
*/
/**
* Get an MD5 hash
*
* @paraminputString:string|number|object
* The value to hash. Objects will be converted to JSON strings before they are hashed.
*
* @returnsstring
*/
/**
* Get an SHA256 hash
*
* @paraminputString:string|number|object
* The value to hash. Objects will be converted to JSON strings before they are hashed.
*
* @returnsstring
*/
/**
* Toggle Class(s) on elements in Collection
*
* @paramclassName:string|string[]
* The class(s) to toggle.
*
* @paramforce?:boolean|string[]
* Force true to add class or false to remove class.
* Undefined will check to determine toggle state.
*
* @returns SpryJsQueryCollection
*/
/**
* Set the Attribute name and value on elements in collection
*
* @paramattributeName:string - Attribute name to Set.
* @paramattributeValue:string - Attribute value to Set. If empty it will default to a blank string "".
*
* @returns SpryJsQueryCollection
*/
/**
* Toggle Attribute(s) on elements in collection
*
* @paramattributeName:string|string[]
* Attribute names to toggle.
*
* @paramforce?:boolean
* Force true to add Attribute or false to remove Attribute.
* Undefined will check to determine toggle state.
*
* @returns SpryJsQueryCollection
*/
/**
* Remove Attribute(s) from elements in collection
*
* @paramattributeName:string|string[] - The Attribute(s) to remove.
*
* @returns SpryJsQueryCollection
*/
/**
* Add an event listener to all elements within the collection
*
* @paramtype:string
* Event Type to listen for.
*
* @paramlistener:EventListenerOrEventListenerObject
* Callback Listener or Event Listener Object to apply on event.
*
* @paramoptions?:AddEventListenerOptions
* Additional Event Listener Options.
*
* @returns SpryJsQueryCollection
*
* For more details see: MDN addEventListener
*/
/**
* Remove an event listener on all elements within the collection
*
* @paramtype:string
* Event Type to Remove.
*
* @paramlistener:EventListenerOrEventListenerObject
* Callback Listener or Event Listener Object to remove.
*
* @paramoptions?:AddEventListenerOptions
* Additional Event Listener Options.
*
* @returns SpryJsQueryCollection
*
* For more details see: MDN removeEventListener
*/
/**
* Loop through each element in the collection
*
* @paramcallbackFn:Function - Callback function to apply to each element in the Collection.
* Callback provides (el:Element, index:number)
*
* @returns SpryJsQueryCollection
*/
/**
* Resets the collection to a single element by index
*
* @parami: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
*/
/**
* Resets the collection to a single element by nth selector
*
* @paramn: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
*/
/**
* Resets the collection to a range by index.
* Both parameters can use Negative numbers to indicate an offset from the end.
*
* @paramstart:number - Start index of Range.
* @paramend?:number - End index of range.
* # Warning - Invalid params could lead to a truncated collection.
*
* @returns SpryJsQueryCollection
*/
/**
* Resets the collection to a range by index.
* Both parameters can use Negative numbers to indicate an offset from the end.
*
* @paramcallbackFn:Function - Callback Function to check collection against.
* callbackFn provides (value: Element, index:number, array:Element[]) and must return boolean
*
* @paramthisArg?:object - A value to use as this when executing callbackFn.
*
* @returns SpryJsQueryCollection
*
* For more details see: MDN Array.prototype.filter()
*/