jQuery Plugin For Aligning Nearly-Aligned Elements - Snappy

Snappy is a simple and lightweight jQuery plugin for aligning nearly-aligned elements on the page to fit your web typography. It will figure out what should be aligned, and adjust the parameter of your choice to align things. Please take a look at the demo for more information.

Basic Usage:

1. Include jQuery library and jQuery Snappy on the page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="jquery.50E.snappy.js"></script> 

2. Markup

<article>
<h2>Title 1</h2>
<div class="snap">Content 1</div>
</article>

<article>
<h2>Title 2</h2>
<div class="snap">Content 2</div>
</article>

<article>
<h2>Title 3</h2>
<div class="snap">Content 3</div>
</article>

...

3. The javascript

<script type="text/javascript">

// Adjust top margin of align all ".snap" elements that are within 80px vertically.
$(".snap").snappy({
"adjust":"margin-top", // "padding-top" or "margin-top"
"tolerance":80, // number of pixels beyond which not to attempt to snap. Default=50
"maxpass":2 // number of passes, default=1, 2 or 3 may be required to cope with collapsed margins
});

// Adjust the height of the articles, to make the bottom offset (y+height) all the same (where the bottom is within 80px)
$("article").snappy({ 
"adjust": "height", 
"tolerance": 80, 
"maxpass": 1, 
"measure": "offsetbottom" // measurement to take to gauge position, "offsettop" | "offsetleft" | "offsetbottom" | function(e){}, default = offsettop
});

</script>

---

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