Aligns an absolutely positioned element to another.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
GPL-LICENSE.txt
MIT-LICENSE.txt
README.markdown
alignto.js
alignto.min.js
package.json
sample.html

README.markdown

jQuery alignTo Plugin

This plugin aligns an absolutely positioned layer relative to another. You can choose which corner of the layer to align to the target's which corner.

Syntax

$(layer).alignTo(target, { options });
  • target selector or jQuery element
  • gap the distance between the two elements' edges
options
  • posX, posY reference point of the element to be aligned 0 = ALIGN_LEFT | 1 = ALIGN_CENTER | 2 = ALIGN_RIGHT, 0 = ALIGN_TOP | 1 = ALIGN_MIDDLE | 2 = ALIGN_BOTTOM
  • toX, toY reference point of the target element ( the same as above )

Demo

http://lazaworx.com/static/alignto-plugin/sample.html

Usage

// The tooltips to position
1
2
3

// The targets to align to

(default) this left / middle
to right / middle this right / top
to center / bottom
gap = 0
<script src="alignto.js"></script> <script> $(document).ready(function() { // Using the defaults $('.tooltip:first').alignTo('.targets > span:first'); // Aligning the left middle point to the target's right middle $('.tooltip:nth(1)').alignTo('.targets > span:nth(1)', { posX: ALIGN_LEFT, posY: ALIGN_MIDDLE, toX: ALIGN_RIGHT, toY: ALIGN_MIDDLE }); // Aligning the right top corner to the target's center bottom $('.tooltip:last').alignTo('.targets > span:last', { posX: ALIGN_RIGHT, posY: ALIGN_TOP, toX: ALIGN_CENTER, toY: ALIGN_BOTTOM, gap: 0 }); }); </script>

Requirements

jQuery 1.7 or higher

License

Available for use in all personal or commercial projects under both MIT and GPL licenses.

Copyright (c) 2012 Molnar Laszlo