- Skip to main content
- Skip to "About this site"

# Data Inview

Questions or comments?

## Purpose

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

## Working example

- English example
- French 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, 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

## 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:
  2014-08-04