79 lines
2.2 KiB
HTML
79 lines
2.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="index.css">
|
|
</head>
|
|
|
|
<body style="height: 2000px">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
|
|
esse sequi officia sapiente.</p>
|
|
|
|
<blockquote>
|
|
Teacher: Why are you late?
|
|
Student: There was a man who lost a hundred dollar bill.
|
|
Teacher: That's nice. Were you helping him look for it?
|
|
Student: No. I was standing on it.
|
|
</blockquote>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
|
|
esse sequi officia sapiente.</p>
|
|
|
|
|
|
<script>
|
|
|
|
function getCoords(elem) {
|
|
let box = elem.getBoundingClientRect();
|
|
|
|
return {
|
|
top: box.top + pageYOffset,
|
|
left: box.left + pageXOffset
|
|
};
|
|
}
|
|
|
|
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";
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
function showNote(anchor, position, html) {
|
|
|
|
let note = document.createElement('div');
|
|
note.className = "note";
|
|
note.innerHTML = html;
|
|
document.body.append(note);
|
|
|
|
positionAt(anchor, position, note);
|
|
}
|
|
|
|
// test it
|
|
let blockquote = document.querySelector('blockquote');
|
|
|
|
showNote(blockquote, "top", "note above");
|
|
showNote(blockquote, "right", "note at the right");
|
|
showNote(blockquote, "bottom", "note below");
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|