dom-align

dom-align

align source html element with target html element flexibly. port from kissyteam/component align

Screenshot

Install

Feature

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

Online Demo

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

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
});

API

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

alignConfig object details

name	type	description
points	String[2]	move point of source node to align with point of target node, such as ['tr','cc'], align top right point of source node with center point of target node. point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right)
offset	Number[2]	offset source node by offset[0] in x and offset[1] in y
overflow	Object	if adjustX field is true, then will adjust source node in x direction if source node is invisible. if adjustY field is true, then will adjust source node in y direction if source node is invisible.

Development

npm install
npm start

Example

http://localhost:8000/examples/

Test Case

http://localhost:8000/tests/runner.html?coverage

Coverage

http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage

License

dom-align is released under the MIT license.

Similar packages

Other packages similar to dom-align

popper.js

Popper.js is a library used to position poppers (floating elements) in web applications. It provides more advanced positioning and flipping strategies compared to dom-align, making it suitable for complex tooltip and dropdown positioning.

tether

Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page. It offers similar functionality to dom-align but includes additional features like constraints to keep elements within the viewport.

position.js

Position.js is a lightweight library for positioning elements relative to other elements or the viewport. It offers basic alignment functionalities similar to dom-align but with a simpler API and fewer configuration options.