Data Inview

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

Displays an overlay when a section moves out of the viewport.

Working example

How to implement

  1. Add the wb-inview class to an element.

    <section class="wb-inview">
	...
</section>

  2. Handle the view state changes using one of the following approaches:

    1. Overlays: You can open and close overlays based upon an element's view state.

      1. Add an overlay with a unique id. See the overlay documentation for further details.
      2. Add the data-inview attribute to the element with the value being the unique id of the overlay added in the previous step.
      3. Optional: Add the show-none class to the element to make the overlay only open when the element is fully out of view (default is partially out of view).

    2. Show/hide content: You can show/hide content with CSS transitions, based upon an element's view state.

      1. Add an element with a unique id.
      2. Add a CSS transition class to the element added in the previous step (e.g., fade, slide, slidevert, etc.)
      3. Optional: Reverse the transition by adding the reverse class with the CSS transition.
      4. Add the data-inview attribute to the element with the wb-inview class with the value being the unique id of the element with the CSS transition class.
      5. Optional: Add the show-none class to the wb-inview element to make the CSS transition only occur when the wb-inview element is fully out of view (default is partially out of view).

    3. Events: You can handle the view state change events through JavaScript.

      1. Add an event handler to listen for each of the view state changes:

        $( document ).trigger( "all.wb-inview partial.wb-inview none.wb-inview", function( event ) {
	if ( event.namespace === "wb-inview" ) {
		switch ( eventType ) {
	
		case "all":
			// event.target is a wb-inview element that has become completely visible
			break;

		case "partial": {
			// event.target is a wb-inview element that has become partially hidden
			break;

		case "none": 
			// event.target is a wb-inview element that has become completely hidden
		}
	}
});

Configuration options

Option Description How to configure Values
data-inview Identifies the element to trigger a change on (uses the unique id of the element). Add the data-inview attribute with the value being the unique id of the element to trigger a change on. Unique id of the target element
show-none Overrides the overlay/CSS transition trigger to only occur when the element is completely hidden. Add the show-none class to the element. n/a

Events

Event Trigger What it does
wb-init.wb-inview Triggered manually (e.g., $( ".wb-inview" ).trigger( "wb-init.wb-inview" );). Used to manually initialize the Data Inview plugin. Note: The Data Inview plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-inview (v4.0.5+) Triggered automatically after the Data InView plugin has initialized. Used to identify where the Data InView plugin was initialized (target of the event) 
$( document ).on( "wb-ready.wb-inview", ".wb-inview", function( event ) {
});
$( ".wb-inview" ).on( "wb-ready.wb-inview", function( event ) {
});
all.wb-inview (v4.0.4+) Triggered automatically when a wb-inview element becomes completely visible. Used to identify that the view state of a wb-inview element has changed to all. 
$( document ).on( "all.wb-inview", ".wb-inview", function( event ) {
});
$( ".wb-inview" ).on( "all.wb-inview", function( event ) {
});
partial.wb-inview (v4.0.4+) Triggered automatically when a wb-inview element becomes partially hidden. Used to identify that the view state of a wb-inview element has changed to partial. 
$( document ).on( "partial.wb-inview", ".wb-inview", function( event ) {
});
$( ".wb-inview" ).on( "partial.wb-inview", function( event ) {
});
none.wb-inview (v4.0.4+) Triggered automatically when a wb-inview element becomes completely hidden. Used to identify that the view state of a wb-inview element has changed to none. 
$( document ).on( "none.wb-inview", ".wb-inview", function( event ) {
});
$( ".wb-inview" ).on( "none.wb-inview", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Data Inview plugin source code on GitHub

Date modified: