jQuery Plugin For Creating Stacked Elements - elstack

File Size: 9.41 KB
Views Total: 548
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Creating Stacked Elements - elstack

elstack is a simple and funny jQuery plugin used to create a group of HTML elements, to show a bundle just like the stacked cards.

How to use it:

1. Just place the jQuery elstack plugin's script after jQuery JavaScript library and we're ready to go.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="dist/elStack.min.js"></script>

2. Add the 'data-elstack' attribute to your element and specify the number of elements to be stacked.

<div data-elstack="10">
  Custom content here
</div>

3. Adjust the top and left offsets in pixels.

<div data-elstack="10"
     data-elstack-offset-top="8" 
     data-elstack-offset-left="8">
     Custom content here
</div>

4. Override the default wrapper CSS class:

<div data-elstack="10"
     data-elstack-offset-top="8" 
     data-elstack-offset-left="8"
     data-elstack-class="elStack-container">
     Custom content here
</div>

5. Set the stack styles:

<div data-elstack="10"
     data-elstack-offset-top="8" 
     data-elstack-offset-left="8"
     data-elstack-style="default">
     Custom content here
</div>

Change log:

2016-12-31

  • added stack styles.

This awesome jQuery plugin is developed by farhanwazir. For more Advanced Usages, please check the demo page or visit the official website.