up

Author: iliakan

2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/field.png

@@ -6,7 +6,7 @@ The coordinates start from the inner left-upper corner of the field:
 
 The inner field width/height is `clientWidth/clientHeight`. So the field center has coordinates `(clientWidth/2, clientHeight/2)`.
 
-...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:
+...But if we set `ball.style.left/top` to such values, then not the ball as a whole, but the left-upper edge of the ball would be in the center:
 
 ```js
 ball.style.left = Math.round(field.clientWidth / 2) + 'px';
@@ -26,24 +26,29 @@ ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'p
 
 **Attention: the pitfall!**
 
-The code won't work reliably while `<img>` width/height is not given to the browser:
+The code won't work reliably while `<img>` has no width/height:
 
 ```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.
+When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal `0` until the image finishes loading.
 
-If none is given, then the sizes are assumed to be `0` until the image loads.
+In real life after the first load browser usually caches the image, and on next loads it will have the size immediately.
 
-TODO
+But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates.
 
-После первой загрузки изображение уже будет в кеше браузера, и его размеры будут известны. Но когда браузер впервые видит документ -- он ничего не знает о картинке, поэтому значение `ball.offsetWidth` равно `0`. Вычислить координаты невозможно.
-
-Чтобы это исправить, добавим `width/height` к картинке:
+We should fix that by adding `width/height` to `<img>`:
 
 ```html
 <img src="ball.png" *!*width="40" height="40"*/!* id="ball">
 ```
 
-Теперь браузер всегда знает ширину и высоту, так что все работает. Тот же эффект дало бы указание размеров в CSS.
+...Or provide the size in CSS:
+
+```css
+#ball {
+  width: 40px;
+  height: 40px;
+}
+```

2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/[email protected]

@@ -9,7 +9,7 @@
       background-color: #00FF00;
       position: relative;
     }
-    
+
     #ball {
       position: absolute;
     }
@@ -20,15 +20,12 @@
 
 
   <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    <img src="https://en.js.cx/clipart/ball.svg" width="40" height="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
     . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
   </div>
 
 
   <script>
-    var ball = document.getElementById('ball')
-    var field = document.getElementById('field')
-
     // ball.offsetWidth=0 before image loaded! 
     // to fix: set width
     ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'
@@ -38,4 +35,4 @@
 
 </body>
 
-</html>
+</html>

2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/solution.md

@@ -9,7 +9,7 @@
       background-color: #00FF00;
       position: relative;
     }
-    
+
     #ball {
       position: absolute;
     }
@@ -20,11 +20,11 @@
 
 
   <div id="field">
-    <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    <img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
     . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
   </div>
 
 
 </body>
 
-</html>
+</html>

2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/solution.view/index.html

@@ -1,10 +1,6 @@
-Отличия:
-
-1. `getComputedStyle` не работает в IE8-.
-2. `clientWidth` возвращает число, а `getComputedStyle(...).width` -- строку, на конце `px`.
-3. `getComputedStyle` не всегда даст ширину, он может вернуть, к примеру, `"auto"` для инлайнового элемента.
-4. `clientWidth` соответствует внутренней видимой области элемента, *включая `padding`, а CSS-ширина `width` при стандартном значении `box-sizing` соответствует зоне *внутри `padding`*.
-5. Если есть полоса прокрутки, то некоторые браузеры включают её ширину в `width`, а некоторые -- нет.
-
-    Свойство `clientWidth`, с другой стороны, полностью кросс-браузерно. Оно всегда обозначает размер *за вычетом прокрутки*, т.е. реально доступный для содержимого.
+Differences:
 
+1. `clientWidth` is numeric, while `getComputedStyle(elem).width` returns a string with `px` at the end.
+2. `getComputedStyle` may return non-numeric width like `"auto"` for an inline element.
+3. `clientWidth` is the inner content area of the element plus paddings, while CSS width (with standard `box-sizing`) is the inner conand sometent area *without paddings*.
+4. If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more), and some do not. The `clientWidth` property is always the same: scrollbar size is substracted if reserved.

2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/source.view/index.html

@@ -2,8 +2,8 @@ importance: 5
 
 ---
 
-# В чём отличие "width" и "clientWidth" ?
+# The difference: CSS width versus clientWidth
 
-В чём отличия между `getComputedStyle(elem).width` и `elem.clientWidth`?
+What's the difference between `getComputedStyle(elem).width` and `elem.clientWidth`?
 
-Укажите хотя бы три отличия, лучше -- больше.
+Give at least 3 differences. The more the better.

2-ui/1-document/15-size-and-scroll/5-expand-element/solution.md

@@ -8,15 +8,15 @@
       margin: 0;
       padding: 0;
     }
-    
+
     #example {
       width: 300px;
       height: 200px;
       overflow: auto;
       border: 25px solid #E8C48F;
       padding: 20px;
     }
-    
+
     .key {
       cursor: pointer;
       text-decoration: underline;
@@ -43,26 +43,22 @@ <h3>Introduction</h3>
   </div>
 
 
-  <div id="mouse-wrap">Координаты мыши: <span id="mouse">...</span></div>
+  <div id="mouse-wrap">Mouse coordinates: <span id="mouse">...</span></div>
   <div id="info"></div>
 
 
   <script>
-    var example = document.getElementById('example')
-
-    var info = document.getElementById('info')
-
-    var props = {
-      'размеры': ['clientLeft', 'clientTop', 'clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight', 'scrollWidth', 'scrollHeight'],
-      'прокрутка': ['scrollLeft', 'scrollTop'],
-      'позиционирование по рендерингу': ['offsetParent', 'offsetLeft', 'offsetTop']
-    }
+    let props = {
+      geometry: ['clientLeft', 'clientTop', 'clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight', 'scrollWidth', 'scrollHeight'],
+      scroll: ['scrollLeft', 'scrollTop'],
+      offsetParent: ['offsetParent', 'offsetLeft', 'offsetTop']
+    };
 
-    info.innerHTML = '<h3>Нажмите для просмотра значения:</h3>';
-    for (var k in props) {
-      info.innerHTML += '<h4>' + k + '</h4>';
-      var prop = props[k];
-      for (var i = 0; i < prop.length; i++) {
+    info.innerHTML = '<h3>Click to see the value:</h3>';
+    for (let k in props) {
+      info.innerHTML += `<h4>${k}</h4>`;
+      let prop = props[k];
+      for (let i = 0; i < prop.length; i++) {
         info.innerHTML += "<span class='key'>" + prop[i] + '</span>: <span id="' + prop[i] + '">&nbsp;</span>' + " "
         i++;
         if (i < prop.length) {
@@ -74,11 +70,11 @@ <h3>Introduction</h3>
     }
 
     document.onclick = function(event) {
-      var target = event.target;
+      let target = event.target;
       if (!target.classList.contains('key')) return;
 
-      var prop = target.innerHTML;
-      var value = example[prop];
+      let prop = target.innerHTML;
+      let value = example[prop];
       value = value.tagName || value;
       document.getElementById(prop).innerHTML = value;
     };
@@ -90,5 +86,4 @@ <h3>Introduction</h3>
   </script>
 
 </body>
-
-</html>
+</html>