Skip to content
/ visi Public

Small js library to assign events when html element becomes visible in viewport

Notifications You must be signed in to change notification settings

Darmikon/visi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Visi.js

Description

Visi.js is a small library written on vanilla.js. It doesn't require any dependencies. Visi.js provides functionality to monitor when dom element is partially in a viewport It adds some methods to simplify your work with handling of such event.

Demo

Visi + animation

Visi on jsfiddler (Watch console)

Installation

  1. Remote

    <script type="text/javascript" 
    	src="https://cdn.rawgit.com/hellfrom/visi/master/visi.min.js"
    ></script>
    
  2. npm

    npm install visi
    
  3. bower

    bower install visi
    

How to use

Event names visible and hidden

Short api

  • add
.add(domElements); //single or multiple dom elements

Short api

  • add
.add(domElements); //single or multiple dom elements
  • on
.on(eventName,function(changedElement,off){
	//off() removes event listeners from fired element
});
  • once (unregisters all events from fired element after first triggering)
.once(eventName,function(changedElement){
	//...
});
  • off
var visi = Visi.add(/*dom elements*/);
visi.off();	//remove all event listeners from selection
  • getOff
var off = Visi.add(dom)
	.on('visible',callback)
	.getOff();
off(); //remove all listeners from selection

HTML

<div class = "p1"
	 id = "id1">
	Lorem...
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class = "p2"
	 id = "id2">
	Lorem ipsum...
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class = "p3 p1">
	Lorem ipsum dolor...
</div>

JS

var visi = Visi.add(document.getElementById('id1'))
	.on('visible',function(){
		console.log('visible id1');
	});

visi.off();

Add event to the same instance again

visi.on('visible',function(){
	console.log('visible again');
});

Add event only once - after first triggering it will automatically unregister all event listeners

Visi.add(document.getElementById('id1')).once('hidden',function(element,off){
	//off() is not necessary for this use case
	//...
});

Listen if element becomes hidden every time with .on

Visi.add(document.querySelectorAll('.p1'))
	.on('hidden',function(element,off){
		console.log('hidden id1',element);
		console.log(arguments);
		
		//unregister listeners only for element which
		//became hidden after some scrolling etc.
		off();
	});

Get unregisters

var off = Visi.add(document.getElementById('id1'))
	.on('visible',function(){
		console.log('visible id1');
	}).getOff();

//remove all events from all dom elements for current selection
off();

About

Small js library to assign events when html element becomes visible in viewport

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published