https://github.com/darmikon/visi

Small js library to assign events when html element becomes visible in viewport
https://github.com/darmikon/visi

events javascript-events visi visibility-event

Last synced: about 1 hour ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/darmikon/visi
• Owner: Darmikon
• Created: 2016-03-31T09:14:53.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-04-02T21:25:13.000Z (over 8 years ago)
• Last Synced: 2024-12-26T23:03:51.179Z (5 days ago)
• Topics: events, javascript-events, visi, visibility-event
• Language: HTML
• Homepage: http://visi.mana.pro/
• Size: 13.7 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
## 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](http://visi.mana.pro/ "Visi.js")

[Visi on jsfiddler](https://jsfiddle.net/Hellfrom/ksn8je0o/ "Visi on jsfiddler") (Watch console)

### Installation ###

1. Remote

	```

	

	```

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

```



	Lorem...


















	Lorem ipsum...


















	Lorem ipsum dolor...



```


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();

```