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

up

Browse source
This commit is contained in:
Ilya Kantor 2017-02-28 12:54:48 +03:00
parent 4272b7bb13
commit 508969c13f
168 changed files with 340 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

0
2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.md Normal file
View file

29
2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css Normal file
View file

@ -0,0 +1,29 @@
.note {
position: absolute;
z-index: 1000;
padding: 5px;
border: 1px solid black;
background: white;
text-align: center;
font: italic 14px Georgia;
opacity: .8;
}
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 0 0 0 100px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
display: inline-block;
white-space: pre;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}

94
2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html Normal file
View file

@ -0,0 +1,94 @@
<!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 showNote(anchor, position, html) {
var note = document.createElement('div');
note.className = "note";
note.innerHTML = html;
document.body.append(note);
positionAt(anchor, position, note);
}
function positionAt(anchor, position, elem) {
let anchorCoords = getCoords(anchor);
switch (position) {
case "top-out":
elem.style.left = anchorCoords.left + "px";
elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
break;
case "right-out":
elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
elem.style.top = anchorCoords.top + "px";
break;
case "bottom-out":
elem.style.left = anchorCoords.left + "px";
elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
break;
case "top-in":
elem.style.left = anchorCoords.left + "px";
elem.style.top = anchorCoords.top + "px";
break;
case "right-in":
elem.style.width = '150px';
elem.style.left = anchorCoords.left + anchor.offsetWidth - elem.offsetWidth + "px";
elem.style.top = anchorCoords.top + "px";
break;
case "bottom-in":
elem.style.left = anchorCoords.left + "px";
elem.style.top = anchorCoords.top + anchor.offsetHeight - elem.offsetHeight + "px";
break;
}
}
let blockquote = document.querySelector('blockquote');
showNote(blockquote, "top-in", "note top-in");
showNote(blockquote, "top-out", "note top-out");
showNote(blockquote, "right-out", "note right-out");
showNote(blockquote, "bottom-in", "note bottom-in");
</script>
</body>
</html>

28
2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md Normal file
View file

@ -0,0 +1,28 @@
importance: 5
---
# Position the note inside (absolute)
Extend the previous task <info:task/position-at-absolute>: teach the function `positionAt(anchor, position, elem)` to insert `elem` inside the `anchor`.
New values for `position`:
- `top-out`, `right-out`, `bottom-out` -- work the same as before, they insert the `elem` over/right/under `anchor`.
- `top-in`, `right-in`, `bottom-in` -- insert `elem` inside the `anchor`: stick it to the upper/right/bottom edge.
For instance:
```js
// shows the note above blockquote
positionAt(blockquote, "top-out", note);
// shows the note inside blockquote, at the top
positionAt(blockquote, "top-in", note);
```
The result:
[iframe src="solution" height="310" border="1" link]
As the source code, take the solution of the task <info:task/position-at-absolute>.