https://github.com/mikeludemann/filterjs
Filtering elements
https://github.com/mikeludemann/filterjs
filter javascript jquery module-pattern
Last synced: about 1 month ago
JSON representation
Filtering elements
- Host: GitHub
- URL: https://github.com/mikeludemann/filterjs
- Owner: mikeludemann
- License: mit
- Created: 2017-11-12T04:04:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-14T01:34:37.000Z (over 8 years ago)
- Last Synced: 2025-03-28T02:49:01.272Z (about 1 year ago)
- Topics: filter, javascript, jquery, module-pattern
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# filterJS
Filtering elements with different animation
Using "data" Attribute in HTML and specifies this data Atrribute with the parameter "dataAttribute"
Example
```code
Using diffent modules
filtering.showing.fading(elements, clickElement, eventElement, timer, dataAttribute, attributeSelector);
With Parameter
filtering.showing.fading(".box",".btn","click",1000,"filter",".");
filtering.showing.sliding(elements, clickElement, eventElement, timer, dataAttribute, attributeSelector);
With Parameter
filtering.showing.sliding(".box",".btn","click",1000,"filter",".");
filtering.showing.animateWidth(elements, clickElement, eventElement, timer, dataAttribute, attributeSelector);
With Parameter
filtering.showing.animateWidth(".box",".btn","click",1000,"filter",".");
filtering.showing.animateWidth(".box",".btn","click","fast","filter",".");
filtering.showing.animateHeight(elements, clickElement, eventElement, timer, dataAttribute, attributeSelector);
With Parameter
filtering.showing.animateHeight(".box",".btn","click",1000,"filter",".");
filtering.showing.animateHeight(".box",".btn","click","fast","filter",".");
filtering.showing.animateWidthAndHeight(elements, clickElement, eventElement, timer, dataAttribute, attributeSelector);
With Parameter
filtering.showing.animateWidthAndHeight(".box",".btn","click",1000,"filter",".");
filtering.showing.animateWidthAndHeight(".box",".btn","click","fast","filter",".");
Using datt Attribute in HTML
Filter Elements
="text">...
With Parameter
...
Search Elements
>...
With Parameter
...
...
```
Example with data attribute filter
```code
Using diffent modules
filtering.showing.fading: function(elements, dataElements, dataAttribute, dataAttributeAll, clickElement, eventElement, timer);
With Parameter
filtering.showing.fading(".box","[data-name]","filter","all",".btn","click",1000);
filtering.showing.fading(".box","[data-name]","filter","all",".btn","hover",1000);
filtering.showing.sliding: function(elements, dataElements, dataAttribute, dataAttributeAll, clickElement, eventElement, timer);
With Parameter
filtering.showing.sliding(".box","[data-name]","filter","all",".btn","click",1000);
filtering.showing.sliding(".box","[data-name]","filter","all",".btn","hover",1000);
filtering.showing.animateWidth: function(elements, dataElements, dataAttribute, dataAttributeAll, clickElement, eventElement, timer);
With Parameter
filtering.showing.animateWidth(".box","[data-name]","filter","all",".btn","click",1000);
filtering.showing.animateWidth(".box","[data-name]","filter","all",".btn","hover",1000);
filtering.showing.animateHeight: function(elements, dataElements, dataAttribute, dataAttributeAll, clickElement, eventElement, timer);
With Parameter
filtering.showing.animateHeight(".box","[data-name]","filter","all",".btn","click",1000);
filtering.showing.animateHeight(".box","[data-name]","filter","all",".btn","hover",1000);
filtering.showing.animateWidthAndHeight: function(elements, dataElements, dataAttribute, dataAttributeAll, clickElement, eventElement, timer);
With Parameter
filtering.showing.animateWidthAndHeight(".box","[data-name]","filter","all",".btn","click",1000);
filtering.showing.animateWidthAndHeight(".box","[data-name]","filter","all",".btn","hover",1000);
Using datt Attribute in HTML
Filter Elements
="text">...
With Parameter
...
Search Elements
=>...
With Parameter
...
```