The dom-align npm package is used for aligning DOM elements relative to each other. It provides utilities to position elements in relation to other elements or the viewport, ensuring they are properly aligned according to specified rules.
Aligning Elements
This feature allows you to align a source element relative to a target element. The `points` configuration specifies which points of the elements should be aligned, and the `offset` configuration allows you to add an offset to the alignment.
const align = require('dom-align');
const source = document.getElementById('source');
const target = document.getElementById('target');
const alignConfig = {
points: ['tl', 'bl'], // Align top-left of source to bottom-left of target
offset: [0, 10], // Offset by 10px vertically
};
align(source, target, alignConfig);Viewport Alignment
This feature allows you to align an element relative to the viewport. The `points` configuration specifies which points of the element and the viewport should be aligned, and the `offset` configuration allows you to add an offset to the alignment.
const align = require('dom-align');
const source = document.getElementById('source');
const alignConfig = {
points: ['tc', 'bc'], // Align top-center of source to bottom-center of viewport
offset: [0, 20], // Offset by 20px vertically
};
align(source, window, alignConfig);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 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 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.
align source html element with target html element flexibly.
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,
});
| 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. If offset contains percentage string value, it is relative to sourceNode region. |
| targetOffset | Number[2] | offset target node by offset[0] in x and offset[1] in y. If targetOffset contains percentage string value, it is relative to targetNode region. |
| 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. |
npm install
npm start
http://localhost:8000/examples/
http://localhost:8000/tests/runner.html?coverage
dom-align is released under the MIT license.
1.1.0
FAQs
Align DOM Node Flexibly
The npm package dom-align receives a total of 518,824 weekly downloads. As such, dom-align popularity was classified as popular.
We found that dom-align demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.