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

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

@ -0,0 +1,4 @@
In this task we only need to accuracely calculate the coorindates. See the code for details.
Please note: the elements must be in the document to read `offsetHeight` and other properties.
A hidden (`display:none`) or out of the document element has no size.

28
2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css Executable file
View file

@ -0,0 +1,28 @@
.note {
position: fixed;
z-index: 1000;
padding: 5px;
border: 1px solid black;
background: white;
text-align: center;
font: italic 14px Georgia;
}
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;
}

82
2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html Executable file
View file

@ -0,0 +1,82 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<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>
/**
* Positions elem relative to anchor as said in position.
*
* @param {Node} anchor Anchor element for positioning
* @param {string} position One of: top/right/bottom
* @param {Node} elem Element to position
*
* Both elements: elem and anchor must be in the document
*/
function positionAt(anchor, position, elem) {
let anchorCoords = anchor.getBoundingClientRect();
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;
}
}
/**
* Shows a note with the given html at the given position
* relative to the anchor element.
*/
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>

28
2-ui/1-document/11-coordinates/2-position-at/source.view/index.css Executable file
View file

@ -0,0 +1,28 @@
.note {
position: fixed;
z-index: 1000;
padding: 5px;
border: 1px solid black;
background: white;
text-align: center;
font: italic 14px Georgia;
}
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;
}

57
2-ui/1-document/11-coordinates/2-position-at/source.view/index.html Executable file
View file

@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<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>
/**
* Positions elem relative to anchor as said in position.
*
* @param {Node} anchor Anchor element for positioning
* @param {string} position One of: top/right/bottom
* @param {Node} elem Element to position
*
* Both elements: elem and anchor must be in the document
*/
function positionAt(anchor, position, elem) {
// ... your code ...
}
/**
* Shows a note with the given html at the given position
* relative to the anchor element.
*/
function showNote(anchor, position, html) {
// ... your code ...
}
// 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>

15
2-ui/1-document/11-coordinates/2-position-at/task.md Normal file
View file

@ -0,0 +1,15 @@
importance: 5
---
# Show a note near the element
Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` either at the top (`"top"`), right (`"right"`) or bottom (`"bottom"`) of the element `anchor`.
Use it to make a function `showNote(anchor, position, html)` that shows an element with the class `"note"` and the text `html` at the given position near the anchor.
Show the notes like here:
[iframe src="solution" height="350" border="1" link]
P.S. The note should have `position:fixed` for this task.