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/field@2x.png

@@ -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.