up

Author: iliakan

2-ui/1-document/15-size-and-scroll/1-get-scroll-height-bottom/solution.md

@@ -1 +1,5 @@
-Решение: `elem.scrollHeight - elem.scrollTop - elem.clientHeight`.
+The solution is:
+
+```js
+let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
+```

2-ui/1-document/15-size-and-scroll/1-get-scroll-height-bottom/task.md

@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Найти размер прокрутки снизу
+# What's the scroll from the bottom?
 
-Свойство `elem.scrollTop` содержит размер прокрученной области при отсчете сверху. А как подсчитать размер прокрутки снизу?
+The `elem.scrollTop` property is the size of the scrolled out part from the top. How to get "`scrollBottom`" -- the size from the bottom?
 
-Напишите соответствующее выражение для произвольного элемента `elem`.
+Write the code that works for an arbitrary `elem`.
 
-Проверьте: если прокрутки нет вообще или элемент полностью прокручен -- оно должно давать ноль.
+P.S. Please check your code: if there's no scroll or the element is fully scrolled down, then it should return `0`.

2-ui/1-document/15-size-and-scroll/2-scrollbar-width/solution.md

@@ -1,22 +1,20 @@
-Создадим элемент с прокруткой, но без `border` и `padding`. Тогда разница между его полной шириной `offsetWidth` и внутренней `clientWidth` будет равна как раз прокрутке:
+To get the scrollbar width, we can create an element with the scroll, but without borders and paddings.
+
+Then the difference between its full width `offsetWidth` and the inner content area width `clientWidth` will be exactly the scrollbar:
 
 ```js run
-// создадим элемент с прокруткой
-var div = document.createElement('div');
+// create a div with the scroll
+let div = document.createElement('div');
 
 div.style.overflowY = 'scroll';
 div.style.width = '50px';
 div.style.height = '50px';
 
-// при display:none размеры нельзя узнать
-// нужно, чтобы элемент был видим,
-// visibility:hidden - можно, т.к. сохраняет геометрию
-div.style.visibility = 'hidden';
+// must put it in the document, otherwise sizes will be 0
+document.body.append(div);
+let scrollWidth = div.offsetWidth - div.clientWidth;
 
-document.body.appendChild(div);
-var scrollWidth = div.offsetWidth - div.clientWidth;
-document.body.removeChild(div);
+div.remove();
 
-alert( scrollWidth );
+alert(scrollWidth);
 ```
-

2-ui/1-document/15-size-and-scroll/2-scrollbar-width/task.md

@@ -2,8 +2,10 @@ importance: 3
 
 ---
 
-# Узнать ширину полосы прокрутки
+# What is the scrollbar width?
 
-Напишите код, который возвращает ширину стандартной полосы прокрутки. Именно самой полосы, где ползунок. Обычно она равна `16px`, в редких и мобильных браузерах может колебаться от `14px` до `18px`, а кое-где даже равна `0px`.
+Write the code that returns the width of a standard scrollbar.
 
-P.S. Ваш код должен работать на любом HTML-документе, независимо от его содержимого.
+For Windows it usually varies between `12px` and `20px`, but if the browser reserves no space for it, then it may be `0px`.
+
+P.S. The code should work in any HTML document, do not depend on its content.

2-ui/1-document/15-size-and-scroll/3-div-placeholder/solution.md

@@ -1,42 +1,42 @@
-При абсолютном позиционировании мяча внутри поля его координаты `left/top` отсчитываются от **внутреннего** угла поля, например верхнего-левого:
+The ball has `position:absolute`. It means that its `left/top` coordinates are measured from the nearest positioned element, that is `#field` (because it has `position:relative`).
 
-![](field.png)
+The coordinates start from the inner left-upper corner of the field:
 
-Метрики для внутренней зоны поля -- это `clientWidth/Height`.
+![](field.png)
 
-Центр - это `(clientWidth/2, clientHeight/2)`.
+The inner field width/height is `clientWidth/clientHeight`. So the field center has coordinates `(clientWidth/2, clientHeight/2)`.
 
-Но если мы установим мячу такие значения `ball.style.left/top`, то в центре будет не сам мяч, а его левый верхний угол:
+...But if we set such values to `ball.style.left/top`, then not the ball as a whole, but the left-upper edge of the ball is in the center:
 
 ```js
-var ball = document.getElementById('ball');
-var field = document.getElementById('field');
-
 ball.style.left = Math.round(field.clientWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2) + 'px';
 ```
 
-[iframe hide="Нажмите, чтобы посмотреть текущий результат" height=180 src="ball-half"]
+Here's how it looks:
 
-Для того, чтобы центр мяча находился в центре поля, нам нужно сместить мяч на половину его ширины влево и на половину его высоты вверх.
+[iframe height=180 src="ball-half"]
 
-```js
-var ball = document.getElementById('ball');
-var field = document.getElementById('field');
+To align the ball center with the center of the field, we should move the ball to the half of its width to the left and to the half of its height to the top:
 
+```js
 ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
 ```
 
-**Внимание, подводный камень!**
+**Attention: the pitfall!**
 
-Код выше стабильно работать не будет, потому что `IMG` идет без ширины/высоты:
+The code won't work reliably while `<img>` width/height is not given to the browser:
 
 ```html
 <img src="ball.png" id="ball">
 ```
 
-**Высота и ширина изображения неизвестны браузеру до тех пор, пока оно не загрузится, если размер не указан явно.**
+When the browser meets such a tag, it tries to figure out its width/height. Either from the `<img width=... height=...>` attributes or (if not given) from CSS.
+
+If none is given, then the sizes are assumed to be `0` until the image loads.
+
+TODO
 
 После первой загрузки изображение уже будет в кеше браузера, и его размеры будут известны. Но когда браузер впервые видит документ -- он ничего не знает о картинке, поэтому значение `ball.offsetWidth` равно `0`. Вычислить координаты невозможно.
 
@@ -47,4 +47,3 @@ ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'p
 ```
 
 Теперь браузер всегда знает ширину и высоту, так что все работает. Тот же эффект дало бы указание размеров в CSS.
-

2-ui/1-document/15-size-and-scroll/3-div-placeholder/solution.view/index.html

@@ -2,20 +2,19 @@ importance: 5
 
 ---
 
-# Поместите мяч в центр поля
+# Place the ball in the field center
 
-Поместите мяч в центр поля.
-
-Исходный документ выглядит так:
+Here's how the source document looks:
 
 [iframe src="source" edit link height=180]
 
-**Используйте JavaScript, чтобы поместить мяч в центр:**
+What are coordinates of the field center?
+
+Calculate them and use to place the ball into the center of the field:
 
 [iframe src="solution" height=180]
 
-- Менять CSS нельзя, мяч должен переносить в центр ваш скрипт, через установку нужных стилей элемента.
-- JavaScript-код должен работать при разных размерах мяча (`10`, `20`, `30` пикселей) без изменений.
-- JavaScript-код должен работать при различных размерах и местоположениях поля на странице без изменений. Также он не должен зависеть от ширины рамки поля `border`.
+- The element should be moved by JavaScript, not CSS.
+- The code should work with any ball size (`10`, `20`, `30` pixels) and any field size, not be bound to the given values.
 
-P.S. Да, центрирование можно сделать при помощи чистого CSS, но задача именно на JavaScript. Далее будут другие темы и более сложные ситуации, когда JavaScript будет уже точно необходим, это -- своего рода "разминка".
+P.S. Sure, centering could be done with CSS, but here we want exactly JavaScript. Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up".