Commit fd81db7

committed

closes #1812

1 parent 6700835 commit fd81db7Copy full SHA for fd81db7

File tree

+12

-7

lines changed

+12

-7

lines changed

Lines changed: 3 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`background-color: #00FF00;`
`10`	`10`	`position: relative;`
`11`	`11`	`}`
`12`		`-`
	`12`	`+`
`13`	`13`	`#ball {`
`14`	`14`	`position: absolute;`
`15`	`15`	`}`
`@@ -20,7 +20,7 @@`
`20`	`20`
`21`	`21`
`22`	`22`	`<div id="field">`
`23`		`- <img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .`
	`23`	`+ <img src="https://js.cx/clipart/ball.svg" height="40" width="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .`
`24`	`24`	`. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .`
`25`	`25`	`</div>`
`26`	`26`
`@@ -38,4 +38,4 @@`
`38`	`38`
`39`	`39`	`</body>`
`40`	`40`
`41`		`-</html>`
	`41`	`+</html>`

Lines changed: 7 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -24,17 +24,22 @@ ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px`
`24`	`24`	`ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';`
`25`	`25`	```
`26`	`26`
`27`		`-Attention: the pitfall!`
	`27`	`+Now the ball is finally centered.`
	`28`	`+`
	`29`	+````warn header="Attention: the pitfall!"
`28`	`30`
`29`	`31`	The code won't work reliably while `<img>` has no width/height:
`30`	`32`
`31`	`33`	```html
`32`	`34`	`<img src="ball.png" id="ball">`
`33`	`35`	```
	`36`	+````
`34`	`37`
`35`	`38`	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.
`36`	`39`
`37`		-After the first load browser usually caches the image, and on next loads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates.
	`40`	+So the value of `ball.offsetWidth` will be `0` until the image loads. That leads to wrong coordinates in the code above.
	`41`	`+`
	`42`	+After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`.
`38`	`43`
`39`	`44`	We should fix that by adding `width/height` to `<img>`:
`40`	`45`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`
`27`	`27`
`28`	`28`	`<script>`
`29`		`- // ball.offsetWidth=0 before image loaded!`
	`29`	`+ // ball.offsetWidth=0 before image loaded!`
`30`	`30`	`// to fix: set width`
`31`	`31`	`ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'`
`32`	`32`	`ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ Here's how the source document looks:`
`10`	`10`
`11`	`11`	`What are coordinates of the field center?`
`12`	`12`
`13`		`-Calculate them and use to place the ball into the center of the field:`
	`13`	`+Calculate them and use to place the ball into the center of the green field:`
`14`	`14`
`15`	`15`	`[iframe src="solution" height=180]`
`16`	`16`

Comments

(0)