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

42
2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md Normal file
View file

@ -0,0 +1,42 @@
# Outer corners
Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
```js
let coords = elem.getBoundingClientRect();
let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];
```
# Left-upper inner corner
That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
```js
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
```
# Right-bottom inner corner
In our case we need to substract the border size from the outer coordinates.
We could use CSS way:
```js
let answer4 = [
coords.right - parseInt(getComputedStyle(field).borderRightWidth),
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];
```
An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
```js
let answer4 = [
coords.left + elem.clientLeft + elem.clientWidth,
coords.top + elem.clientTop + elem.clientHeight
];
```

27
2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.css Executable file
View file

@ -0,0 +1,27 @@
body {
padding: 20px 0 0 20px;
cursor: pointer;
}
#field {
overflow: hidden;
width: 200px;
height: 150px;
border-top: 10px solid black;
border-right: 10px solid gray;
border-bottom: 10px solid gray;
border-left: 10px solid black;
background-color: #00FF00;
font: 10px/1.2 monospace;
}
.triangle-right {
position: relative;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 20px solid red;
text-indent: -20px;
font: 12px/1 monospace;
}

59
2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html Executable file
View file

@ -0,0 +1,59 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<script>
document.onclick = function(e) { // shows click coordinates
coords.innerHTML = e.clientX + ':' + e.clientY;
};
</script>
</head>
<body>
Click anywhere to get window coordinates.
<br> That's for testing, to check the result you get by JavaScript.
<br>
<div id="coords">(click coordinates show up here)</div>
<div id="field">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<div class="triangle-right" style="left:-20px;top:-176px">1</div>
<div class="triangle-right" style="left:-10px;top:-178px">3</div>
<div class="triangle-right" style="left:190px;top:-40px">4</div>
<div class="triangle-right" style="left:200px;top:-42px">2</div>
<script>
let fieldCoords = field.getBoundingClientRect();
let answer = [
[ // 1
fieldCoords.left,
fieldCoords.top
],
[ // 2
fieldCoords.right,
fieldCoords.bottom
],
[ // 3
fieldCoords.left + field.clientLeft,
fieldCoords.top + field.clientTop
],
[ // 4
fieldCoords.left + field.clientLeft + field.clientWidth,
fieldCoords.top + field.clientTop + field.clientHeight
]
];
alert(answer.join(' '));
</script>
</body>
</html>

27
2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.css Executable file
View file

@ -0,0 +1,27 @@
body {
padding: 20px 0 0 20px;
cursor: pointer;
}
#field {
overflow: hidden;
width: 200px;
height: 150px;
border-top: 10px solid black;
border-right: 10px solid gray;
border-bottom: 10px solid gray;
border-left: 10px solid black;
background-color: #00FF00;
font: 10px/1.2 monospace;
}
.triangle-right {
position: relative;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 20px solid red;
text-indent: -20px;
font: 12px/1 monospace;
}

39
2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html Executable file
View file

@ -0,0 +1,39 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<script>
document.onclick = function(e) { // shows click coordinates
coords.innerHTML = e.clientX + ':' + e.clientY;
};
</script>
</head>
<body>
Click anywhere to get window coordinates.
<br> That's for testing, to check the result you get by JavaScript.
<br>
<div id="coords">(click coordinates show up here)</div>
<div id="field">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<div class="triangle-right" style="left:-20px;top:-176px">1</div>
<div class="triangle-right" style="left:-10px;top:-178px">3</div>
<div class="triangle-right" style="left:190px;top:-40px">4</div>
<div class="triangle-right" style="left:200px;top:-42px">2</div>
<script>
// ...your code...
</script>
</body>
</html>

24
2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md Normal file
View file

@ -0,0 +1,24 @@
importance: 5
---
# Find window coordinates of the field
In the iframe below you can see a document with the green "field".
Use JavaScript to find window coordinates of corners pointed by with arrows.
There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
[iframe border=1 height=360 src="source" link edit]
Your code should use DOM to get window coordinates of:
1. Left-upper outer corner (that's simple).
2. Right-bottom outer corner (simple too).
3. Left-upper inner corner (a bit harder).
4. Right-bottom inner corner (there are several ways, choose one).
The coordinates that you calculate should be the same as those returned by the mouse click.
P.S. The code should also work if the element has another size or border, not bound to any fixed values.