jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor

Browse source
This commit is contained in:
Ilya Kantor 2019-07-20 10:15:39 +03:00
parent 5d549f537f
commit 2b18776ed5
2 changed files with 39 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

22
2-ui/1-document/11-coordinates/article.md
View file

@ -220,6 +220,28 @@ function getCoords(elem) {
} }
``` ```
If in the example above we use it with `position:absolute`, that would work right.
The modified `createMessageUnder` function:
```js
function createMessageUnder(elem, html) {
let message = document.createElement('div');
message.style.cssText = "*!*position:absolute*/!*; color: red";
let coords = *!*getCoords(elem);*/!*
message.style.left = coords.left + "px";
message.style.top = coords.bottom + "px";
message.innerHTML = html;
return message;
}
```
You'll find other examples in the task.
## Summary ## Summary
Any point on the page has coordinates: Any point on the page has coordinates:

34
2-ui/1-document/11-coordinates/head.html
View file

@ -1,30 +1,30 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
let elem = document.getElementById('coords-show-mark'); let elem = document.getElementById('coords-show-mark');
// no elem in ebook mode // no elem in ebook (pdf/epub) mode
if (elem) { if (elem) {
elem.onclick = function() { elem.onclick = function() {
function createMessageUnder(elem, text) { function createMessageUnder(elem, text) {
let coords = elem.getBoundingClientRect(); let coords = elem.getBoundingClientRect();
let message = document.createElement('div'); let message = document.createElement('div');
message.style.cssText = "position:fixed; color: red"; message.style.cssText = "position:fixed; color: red";
message.style.left = coords.left + "px"; message.style.left = coords.left + "px";
message.style.top = coords.bottom + "px"; message.style.top = coords.bottom + "px";
message.innerHTML = text; message.innerHTML = text;
return message; return message;
}
let message = createMessageUnder(elem, 'Hello, world!');
document.body.append(message);
setTimeout(() => message.remove(), 5000);
} }
let message = createMessageUnder(elem, 'Hello, world!');
document.body.append(message);
setTimeout(() => message.remove(), 5000);
} }
}
}); });