Data Inview

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

Questions ou commentaires?

Needs translation

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 de modification :