Data Inview

Questions or comments?

Purpose

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

Working example

Issues and Testing

Test page for accessibility issue for screen readers

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, the CSS transition only occur when the wb-inview element is:
        • located Before and fully out of view (default is partially out of view)
        • located After and partially out of view (default is fully 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
		}
	}
});

View state change events

The view state of this section is being identified below through JavaScript.

View state:

HTML

<section class="wb-inview bar-demo">
<h3 class="no-gutter">View state change events</h3>
...
</section>

JavaScript

(function( $, wb ) {
"use strict";

wb.doc.on( "all.wb-inview partial.wb-inview none.wb-inview", function( event) {
if ( event.namespace === "wb-inview" ) {
	$( event.target ).find( ".view-state-status" ).html( event.type );
}
});

})( jQuery, wb );

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, if located before.
  • the element is partially hidden, if located after.
 Add the show-none class to the element. n/a
in-only Displays the transition, the section that is triggered will then stay in place Add the in-only 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: