Skip to content

Commit 508969c

Browse files
committed
up
1 parent 4272b7b commit 508969c

File tree

168 files changed

+340
-10
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

168 files changed

+340
-10
lines changed

2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md renamed to 2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md

+2-2

2-ui/1-document/17-coordinates/2-position-at/task.md renamed to 2-ui/1-document/11-coordinates/2-position-at/task.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.note {
2+
position: absolute;
3+
z-index: 1000;
4+
padding: 5px;
5+
border: 1px solid black;
6+
background: white;
7+
text-align: center;
8+
font: italic 14px Georgia;
9+
}
10+
11+
blockquote {
12+
background: #f9f9f9;
13+
border-left: 10px solid #ccc;
14+
margin: 0 0 0 100px;
15+
padding: .5em 10px;
16+
quotes: "\201C""\201D""\2018""\2019";
17+
display: inline-block;
18+
white-space: pre;
19+
}
20+
21+
blockquote:before {
22+
color: #ccc;
23+
content: open-quote;
24+
font-size: 4em;
25+
line-height: .1em;
26+
margin-right: .25em;
27+
vertical-align: -.4em;
28+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="index.css">
7+
</head>
8+
9+
<body style="height: 2000px">
10+
11+
<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
12+
esse sequi officia sapiente.</p>
13+
14+
<blockquote>
15+
Teacher: Why are you late?
16+
Student: There was a man who lost a hundred dollar bill.
17+
Teacher: That's nice. Were you helping him look for it?
18+
Student: No. I was standing on it.
19+
</blockquote>
20+
21+
<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
22+
esse sequi officia sapiente.</p>
23+
24+
25+
<script>
26+
27+
function getCoords(elem) {
28+
let box = elem.getBoundingClientRect();
29+
30+
return {
31+
top: box.top + pageYOffset,
32+
left: box.left + pageXOffset
33+
};
34+
}
35+
36+
function positionAt(anchor, position, elem) {
37+
38+
let anchorCoords = getCoords(anchor);
39+
40+
switch (position) {
41+
case "top":
42+
elem.style.left = anchorCoords.left + "px";
43+
elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
44+
break;
45+
46+
case "right":
47+
elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
48+
elem.style.top = anchorCoords.top + "px";
49+
break;
50+
51+
case "bottom":
52+
elem.style.left = anchorCoords.left + "px";
53+
elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
54+
break;
55+
}
56+
57+
}
58+
59+
function showNote(anchor, position, html) {
60+
61+
let note = document.createElement('div');
62+
note.className = "note";
63+
note.innerHTML = html;
64+
document.body.append(note);
65+
66+
positionAt(anchor, position, note);
67+
}
68+
69+
// test it
70+
let blockquote = document.querySelector('blockquote');
71+
72+
showNote(blockquote, "top", "note above");
73+
showNote(blockquote, "right", "note at the right");
74+
showNote(blockquote, "bottom", "note below");
75+
</script>
76+
77+
78+
</body>
79+
</html>

2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.md

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.note {
2+
position: absolute;
3+
z-index: 1000;
4+
padding: 5px;
5+
border: 1px solid black;
6+
background: white;
7+
text-align: center;
8+
font: italic 14px Georgia;
9+
opacity: .8;
10+
}
11+
12+
blockquote {
13+
background: #f9f9f9;
14+
border-left: 10px solid #ccc;
15+
margin: 0 0 0 100px;
16+
padding: .5em 10px;
17+
quotes: "\201C""\201D""\2018""\2019";
18+
display: inline-block;
19+
white-space: pre;
20+
}
21+
22+
blockquote:before {
23+
color: #ccc;
24+
content: open-quote;
25+
font-size: 4em;
26+
line-height: .1em;
27+
margin-right: .25em;
28+
vertical-align: -.4em;
29+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="index.css">
7+
</head>
8+
9+
<body style="height: 2000px">
10+
11+
<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
12+
esse sequi officia sapiente.</p>
13+
14+
<blockquote>
15+
Teacher: Why are you late?
16+
Student: There was a man who lost a hundred dollar bill.
17+
Teacher: That's nice. Were you helping him look for it?
18+
Student: No. I was standing on it.
19+
</blockquote>
20+
21+
<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
22+
esse sequi officia sapiente.</p>
23+
24+
<script>
25+
function getCoords(elem) {
26+
let box = elem.getBoundingClientRect();
27+
28+
return {
29+
top: box.top + pageYOffset,
30+
left: box.left + pageXOffset
31+
};
32+
}
33+
34+
function showNote(anchor, position, html) {
35+
36+
var note = document.createElement('div');
37+
note.className = "note";
38+
note.innerHTML = html;
39+
document.body.append(note);
40+
41+
positionAt(anchor, position, note);
42+
}
43+
44+
function positionAt(anchor, position, elem) {
45+
46+
let anchorCoords = getCoords(anchor);
47+
48+
switch (position) {
49+
case "top-out":
50+
elem.style.left = anchorCoords.left + "px";
51+
elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
52+
break;
53+
54+
case "right-out":
55+
elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
56+
elem.style.top = anchorCoords.top + "px";
57+
break;
58+
59+
case "bottom-out":
60+
elem.style.left = anchorCoords.left + "px";
61+
elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
62+
break;
63+
64+
case "top-in":
65+
elem.style.left = anchorCoords.left + "px";
66+
elem.style.top = anchorCoords.top + "px";
67+
break;
68+
69+
case "right-in":
70+
elem.style.width = '150px';
71+
elem.style.left = anchorCoords.left + anchor.offsetWidth - elem.offsetWidth + "px";
72+
elem.style.top = anchorCoords.top + "px";
73+
break;
74+
75+
case "bottom-in":
76+
elem.style.left = anchorCoords.left + "px";
77+
elem.style.top = anchorCoords.top + anchor.offsetHeight - elem.offsetHeight + "px";
78+
break;
79+
}
80+
81+
}
82+
83+
84+
let blockquote = document.querySelector('blockquote');
85+
86+
showNote(blockquote, "top-in", "note top-in");
87+
showNote(blockquote, "top-out", "note top-out");
88+
showNote(blockquote, "right-out", "note right-out");
89+
showNote(blockquote, "bottom-in", "note bottom-in");
90+
</script>
91+
92+
93+
</body>
94+
</html>

2-ui/1-document/17-coordinates/article.md renamed to 2-ui/1-document/11-coordinates/article.md

+56

2-ui/1-document/17-coordinates/head.html renamed to 2-ui/1-document/11-coordinates/head.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,8 @@
1818
}
1919

2020
let message = createMessageUnder(elem, 'Hello, world!');
21-
document.body.appendChild(message);
22-
setTimeout(function() {
23-
document.body.removeChild(message);
24-
}, 5000);
21+
document.body.append(message);
22+
setTimeout(() => message.remove(), 5000);
2523
}
2624

2725
});

2-ui/1-document/17-coordinates/2-position-at/solution.md

-3
This file was deleted.

figures.sketch

1.31 MB
Binary file not shown.

0 commit comments

Comments
 (0)