Methods

static do(elemQS, className) → {undefined}

main.js, line 61

This is the principal way to use this library. Adds a class to all nodes returned by the document.querySelectorAll() method when they become partially visibles in relation to the browser's viewport.
Note: Will be fired once, then automatically unregistered

Parameters:

Name	Type	Description
elemQS	String	The document.querySelectorAll() selector string of the targeted element
className	String	The class name that should be added to the targeted elements when they come into view

Returns:

undefined -

Returns nothing

Example

How to easily add a class to a newly visible HTMLElement

Sive.do("#myElementId", "myClassName");
Sive.do("div", "myClassName");

static doMore(elemQS, eventCallbackopt, fullyVisibleXopt, fullyVisibleYopt, offsetopt, classNameopt) → {undefined}

main.js, line 98

A more complete way to react to in view/out of view events. Adds a Sive for all nodes returned by the document.querySelectorAll() method. It can also trigger a callback (Sive~ScrollEventCallback) function each time one of the targeted elements becomes visible or invisible in relation to the browser's viewport.
Note: Will be fired each time the element's visibility changes as it is not unregistered automatically.

Parameters:

Name	Type	Attributes	Default	Description
elemQS	String			The querySlectorAll string of the target elements
eventCallback	ScrollEventCallback	<optional>	null	The callback function to call when an element is in or out of the browser's viewport. Note: If not set, className will need to be defined for anything to happen.
fullyVisibleX	Boolean	<optional>	false	Should the element be fully visible on X, or partially?
fullyVisibleY	Boolean	<optional>	false	Should the element be fully visible on Y, or partially?
offset	Object	<optional>	{}	Object setting the offset in pixels to use as the viewport Properties Name Type Attributes Default Description top Number <optional> 0 Offset in pixels from the top of the browser's viewport bottom Number <optional> 0 Offset in pixels from the bottom of the browser's viewport left Number <optional> 0 Offset in pixels from the left of the browser's viewport right Number <optional> 0 Offset in pixels from the right of the browser's viewport
className	String	<optional>	""	The class name that should be added to the elements when they comes into view the first time only. Note: Will be used only if eventCallback is not defined.

Returns:

undefined -

Returns nothing

See:

• ScrollEventCallback

Examples

This example uses a callback function to add or remove a border on the element depending of its visibility. It also forces element to be fully visible on both axis to be considered "in view"

Sive.doMore(".myElementsClass", viewCallback, true, true);
function viewCallback(event, auto){
     if (event.inview){
         event.elem.style.border = "2px solid #ff0000";
     }else{
         event.elem.style.border = "none";
     }
}

This example uses a class name to be added when elements come into view. It also use an object to virtually redefine the browser's viewport dimensions.
Note: This event will be fired only once as a class name is used instead of a callback function

Sive.doMore(".myElementsClass", null, false, false, {top:100, left:200, right:200, bottom:20 }, "myClassName");

static isListening() → {Boolean}

main.js, line 225

Checks if listening to scroll event on the window is active

Returns:

Boolean -

Returns true if Sive lib is currently listening on the page, else false

See:

• Sive.startListening

static removeEventForElement(elemInternalID) → {Boolean}

main.js, line 147

Unregisters a Sive for a previously registered HTMLElement.
Note: As this library creates an internal ID for each of the targeted elements, this method is only usefull inside a ScrollEventCallback call. The later will give you access to the internal ID created for it.

Parameters:

Name	Type	Description
elemInternalID	String	The ScrollEventCallback event.internalID parameter

Throws:

Will throw a warning in the console if the element is not found while trying to remove the Sive for wich it is associated.

Returns:

Boolean -

Returns true if the Sive was found and unregistered successfully. Otherwise returns false.

See:

• Sive~ScrollEventCallback

Example

This example shows how to use Sive.removeEventForElement inside a ScrollEventCallback call to unregister an element.

Sive.doMore(".myElementsClass", viewCallback);
function viewCallback(event, auto){
     if (event.inview){
         event.elem.style.border = "2px solid #ff0000";
     }else{
         event.elem.style.border = "none";
         Sive.removeEventForElement(event.internalID);
     }
}

static removeEventForSelector(elemQS) → {Boolean}

main.js, line 166

Unregisters a Sive using the same selector used for the previously registered elements

Parameters:

Name	Type	Description
elemQS	String	The quesrySelectorAll string of the elements to unregister

Returns:

Boolean -

Returns true if the ScrollEvents were found and removed successfully. Otherwise returns false and throws a warning in the console.

Example

This example shows how to use Sive.removeEventForSelector to unregister all elements previously targeted by a div selector.

Sive.removeEventForSelector("div");

static startListening(autoCheckAtStartopt, autoTriggerPreviousElementsopt, scrollBufferopt) → {undefined}

main.js, line 189

Starts listening to scroll event on the window, add a scroll event listener to window object
Note: If the page was scrolled before a reload of the page, it will trigger window.scroll event when refreshing is done, invaliding need of autoCheck (except when the page is at top).

Parameters:

Name	Type	Attributes	Default	Description
autoCheckAtStart	Boolean	<optional>	true	Should the elements trigger visible or hidden event at start (before scrolling)?
autoTriggerPreviousElements	Boolean	<optional>	true	Should the ScrollEvent for non visible elements higher in Y axis (than the current scroll position) be triggered as if they were visibles?
scrollBuffer	Number	<optional>	5	How many window.scroll event to bypass before it is actually taken into account to trigger a Sive? This should be 0 if you want to have the best precision.

Returns:

undefined -

Returns nothing

static stopListening(forceRemoveAllopt) → {undefined}

main.js, line 211

Stops listening to scroll event on the window, removes the scroll event from the window object

Parameters:

Name	Type	Attributes	Default	Description
forceRemoveAll	Boolean	<optional>	false	If true, will also delete all events registered on the page

Returns:

undefined -

Returns nothing