Absolute place elements relative to others
let placer = new Placer(moverEl, {
x:'after',
y:'after',
margin: 0,
stayInWindow: true,
switchSide: true,
});
placer.toElement(target);
<div id=moverEl style="position:absolute">move to</div>
<button id=target>
move to me
</button>
const options = {
x: 'after', // 'after', 'before', 'append', 'prepend', 'center'
y: 'after', // 'after', 'before', 'append', 'prepend', 'center'
margin: 0, // distance to target in px
stayInWindow: true, // boolean, force moverEl to stay in viewport
switchSide: true, // boolean, switch x and y if target is out of window
}
let placer = new Placer(moverEl, options);
placer.toElement(element); // place moverEl relative to element
placer.toClientRect(rect); // place moverEl relative to rect (eg. range.getBoundingClientRect())
placer.followElement(element); // place moverEl relative to element and follow it
import * as module from "https://cdn.jsdelivr.net/gh/u1ui/Placer.js@x.x.x/Placer.min.js"
- MIT License, Copyright (c) 2022 (like all repositories in this organization)
- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥