function getCoords(elem) {
let box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
//either the node positions are fixed or absolute, getCoords is necessary
//a function to get elem-relative position
function positionAt(anchor, position, elem) {
let anchorCoords = getCoords(anchor);
switch (position) {
case "top":
elem.style.left = anchorCoords.left + "px";
elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
//minus elem.offsetHeight
//so that the note would not overlap the content
//same issue for the rest of minusing offset positions below
break;
case "right":
elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
elem.style.top = anchorCoords.top + "px";
break;
case "bottom":
elem.style.left = anchorCoords.left + "px";
elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
break;
}
}
//from The Modern Javascript task
https://plnkr.co/edit/naA10kYhmIR1U87GuMPe?p=preview
let box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
//either the node positions are fixed or absolute, getCoords is necessary
//a function to get elem-relative position
function positionAt(anchor, position, elem) {
let anchorCoords = getCoords(anchor);
switch (position) {
case "top":
elem.style.left = anchorCoords.left + "px";
elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
//minus elem.offsetHeight
//so that the note would not overlap the content
//same issue for the rest of minusing offset positions below
break;
case "right":
elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
elem.style.top = anchorCoords.top + "px";
break;
case "bottom":
elem.style.left = anchorCoords.left + "px";
elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
break;
}
}
//from The Modern Javascript task
https://plnkr.co/edit/naA10kYhmIR1U87GuMPe?p=preview
댓글
댓글 쓰기