dom-align

align source html element with target html element flexibly.

Screenshot

Install

Feature

• support IE9+ chrome firefox
• support align points and offset
• support auto adjust according to visible area

Online Demo

• http://yiminghe.github.io/dom-align/

Usage

var domAlign = require('dom-align');
// use domAlign
// sourceNode's initial style should be position:absolute;left:-9999px;top:-9999px;
domAlign(sourceNode, targetNode, {
  points: ['tl', 'tr'], // align top left point of sourceNode with top right point of targetNode
  offset: [10, 20], // the offset sourceNode by 10px in x and 20px in y,
  targetOffset: ['30%','40%'], // the offset targetNode by 30% of targetNode width in x and 40% of targetNode height in y,
});

API

void domAlign(source: HTMLElement, target: HTMLElement, alignConfig: Object):Function

alignConfig object details

Development

npm install
npm start

Example

http://localhost:8020/examples/

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

dom-align is released under the MIT license.