#jquery plugin jquery

New Post has been published on http://www.htmluse.com/jquery-xfilterlist/

jQuery xFilterList

Download   Demo

jQuery xFilterList is a simple jQuery grid list plugin for easy filter and sorting.

1. INCLUDE JS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.xfilterlist.js"></script>

2. HTML

It’s very easy, defines only your list using an ul and li tags then

sets your filters in each li tags with the data-filter attribute, it can add many filters for one item.

<ul id="sortlist"> <li data-filter="programing"></li> <li data-filter="programing back-end"></li> <li data-filter="programing front-end"></li> <li data-filter="graphic-design illustration"></li> <li data-filter="webdesign front-end"></li> <li data-filter="graphic-design printing"></li> </ul>

3. JAVASCRIPT

var fl = new xFilterList($('sortlist'), // you can set the margin in pixels margin: 5 ); // Filter example fl.filterBy('programing');

4. OPTIONS

margin : The margin for items defined in pixels.

5. METHODS

New Post has been published on http://www.htmluse.com/jquery-stuck-a-responsive-sticky-element-plugin/

jQuery Stuck - A responsive sticky element plugin

Download   Demo

Demos

stuck

release

responsive

performance

jQuery Stuck is a responsive sticky element jQuery plugin designed for use with Foundation, Bootstrap, or your own css solution.

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="src/jquery.stuck.js" type="text/javascript"></script>

2. HTML

Stuck

Add the .stuck class to any responsive .row or .columns you would like fixed to the top of the page when scrolled past.

<div class="row stuck"> Stuck Content </div>

Elements will begin to stick to the top of the page, then stack underneath each other in the order they were inserted into the dom.

<div class="row"> <div class="columns stuck">Stuck to the top</div> <div class="columns stuck">Stacked under the first column</div> </div>

All .stuck elements will slide past each other if they don’t overlap, or stack if they collide. This is done for you with collision detection and not by hard-coding top offsets.

Release

Elements can be trained to stay at the bottom of a container when scrolling past the border. Just add the .release class to your .stucke lement, then put it in a .release-container.

<div class="row release-container"> <div class="columns">Spacer content</div> <div class="columns stuck release">Stuck until bottom of release-container</div> <div class="columns">Spacer content</div> </div>

3. JAVASCRIPT