1
00:00:02,310 --> 00:00:06,590
Now of course though, the tooltip still is in the wrong position, here at the bottom of the page,

2
00:00:06,600 --> 00:00:12,090
that's not where we want it, it would be nice to displayed here below this button for example, so below

3
00:00:12,390 --> 00:00:15,030
this DOM node to which it belongs

4
00:00:15,180 --> 00:00:21,030
and for that we need to find out where exactly that sits on our page, which coordinates this has

5
00:00:21,480 --> 00:00:26,220
and we'll need to find some information about its size as well as you will see

6
00:00:26,220 --> 00:00:31,210
and for that, we first of all need to understand how items are positioned,

7
00:00:31,260 --> 00:00:33,410
well that happens with the help of CSS

8
00:00:33,540 --> 00:00:37,380
and simply based on how the browser renders a page

9
00:00:37,380 --> 00:00:43,560
but we also need to understand how we can get the exact coordinates, the exact calculated width and so

10
00:00:43,560 --> 00:00:51,060
on because as you know with CSS, even without being a CSS expert, you probably know you cannot just assign

11
00:00:51,240 --> 00:00:52,710
pixel values,

12
00:00:52,710 --> 00:00:56,340
you can also use something like rem which is dynamically calculated,

13
00:00:56,400 --> 00:01:02,400
you can use percentages, you can use media queries to use dynamic different sizes

14
00:01:02,400 --> 00:01:07,890
and therefore if you want to find out the exact size as it was rendered, you need Javascript and you

15
00:01:07,890 --> 00:01:12,740
can indeed get coordinates and so on of any DOM element you want to and

16
00:01:12,750 --> 00:01:15,260
that's exactly what we need here. For that

17
00:01:15,270 --> 00:01:20,430
attached you find a zip file with two files in there and that would be the sizes.html file and the

18
00:01:20,430 --> 00:01:22,310
sizes.css file.

19
00:01:22,920 --> 00:01:28,390
If you extract these files, drag the sizes.html file next to your index.html file and the sizes.css

20
00:01:28,430 --> 00:01:35,820
file in the styles folder and with that you can go to your page here and temporarily replace

21
00:01:35,830 --> 00:01:41,750
index.html here at the end with sizes.html and you'll find this page here. If you load that, you'll

22
00:01:41,790 --> 00:01:47,610
get an error regarding a missing sizes.js file, you can simply add one, should be empty anyways and

23
00:01:47,610 --> 00:01:54,720
this is simply a basic dummy file here, dummy setup where we can practice with sizes, positions and so

24
00:01:54,720 --> 00:01:55,810
on.

25
00:01:55,980 --> 00:02:03,420
Now for that, to get access to this box here, we can select it by the ID or here in the dev tools, you

26
00:02:03,420 --> 00:02:09,180
can also select it and then when you select it here on the right, if you mark this div here, you can

27
00:02:09,180 --> 00:02:14,820
also use it in your console with $0.

28
00:02:14,820 --> 00:02:19,180
This is just a shortcut the browser developer tools offer to you and then you have direct access to

29
00:02:19,180 --> 00:02:21,350
the DOM node and you can work with it.

30
00:02:21,760 --> 00:02:27,580
Now which sizes and which properties do we have available that help us with understanding the positioning,

31
00:02:27,580 --> 00:02:37,350
the width and so on? Well for example, there is a method you can call, getBoundingClientRect, if you

32
00:02:37,350 --> 00:02:43,650
execute this as a method, you get back an object which gives you some useful information about this box

33
00:02:44,010 --> 00:02:47,310
and you can run this for any element on the page.

34
00:02:47,310 --> 00:02:53,320
Now what this gives you is a couple of coordinates and sizes, to understand these values,

35
00:02:53,340 --> 00:02:59,040
you need to understand that the browser basically renders the page in a two-dimensional coordinate system

36
00:02:59,070 --> 00:03:03,150
with an x-axis from left to right and a y-axis from top to bottom

37
00:03:03,210 --> 00:03:04,040
and that's important.

38
00:03:04,050 --> 00:03:10,080
It's not like a traditional coordinate system where the y-axis would go from bottom to top and x

39
00:03:10,140 --> 00:03:11,940
from left to right at the bottom

40
00:03:11,940 --> 00:03:17,290
but instead it's all starting in the top left corner and that makes sense if you consider how a web

41
00:03:17,290 --> 00:03:18,250
page is rendered,

42
00:03:18,260 --> 00:03:22,140
it's rendered from top to bottom, not built up from bottom to top.

43
00:03:22,230 --> 00:03:27,440
This coordinate system also thinks in pixels and therefore in the top left corner,

44
00:03:27,450 --> 00:03:35,610
we would have the coordinate 0 0, x has a value of 0 and y has a value of 0. All the way on the

45
00:03:35,610 --> 00:03:36,690
right here,

46
00:03:36,780 --> 00:03:42,340
we would have y still equal to zero but x would be

47
00:03:42,360 --> 00:03:48,120
basically the width of your screen or the width of this document. All the way on the bottom left here,

48
00:03:48,390 --> 00:03:54,930
x would be 0, y would be just as high as your document and in the bottom right corner, x would be as

49
00:03:54,930 --> 00:03:58,380
big as your width and y would be as big as the height of this document.

50
00:03:58,380 --> 00:04:01,980
So this is how you can read this, therefore if you see x y here,

51
00:04:01,980 --> 00:04:08,280
this basically means that this box which we selected has its top left corner at a position of 100

52
00:04:08,280 --> 00:04:12,100
pixels down and 100 pixels from the left.

53
00:04:12,150 --> 00:04:17,910
So the x coordinate on the screen is 100 and the y coordinate is 100 from the top left

54
00:04:17,910 --> 00:04:22,980
corner and we have that positioning because if you check out the sizes.css file,

55
00:04:22,980 --> 00:04:30,240
indeed I have a margin of 100 pixels set for the body which means any element in the body and

56
00:04:30,240 --> 00:04:37,110
this div with this ID is in the body is moved in 100 pixels from top and left because that's

57
00:04:37,110 --> 00:04:39,710
reserved as a margin for the body,

58
00:04:39,870 --> 00:04:41,240
so that's how we get there.

59
00:04:42,670 --> 00:04:47,930
We also got the top and the left value and that's the same as x and y here as you can see

60
00:04:48,040 --> 00:04:53,710
and most of the time that will be the case, if you have a negative width or height, that can differ depending

61
00:04:53,710 --> 00:04:59,680
on the exact positioning and your CSS code but left and top simply gives you the coordinates of the

62
00:04:59,680 --> 00:05:03,340
leftmost and the topmost point of this box in the coordinate system

63
00:05:03,340 --> 00:05:05,990
and typically that's the same as x and y.

64
00:05:06,070 --> 00:05:08,860
More interesting is bottom and right,

65
00:05:08,950 --> 00:05:16,690
well that in the end is just the combination of left and top or x and y with width and height. So

66
00:05:17,260 --> 00:05:22,210
bottom and right basically tells you where the bottommost and the rightmost point is indeed coordinate

67
00:05:22,210 --> 00:05:27,670
system that starts on the top left and therefore width and height are also important of course, should be

68
00:05:27,670 --> 00:05:32,440
pretty self-explanatory, width gives you the total width of the box, height gives you the height of the

69
00:05:32,440 --> 00:05:38,560
box. So this is some rough general information you can get about this box. Now you can also dive into

70
00:05:38,560 --> 00:05:44,260
more specialized properties though if you only need a single value there or if you want to have different

71
00:05:44,260 --> 00:05:49,920
values for some of the sizes based on whether you want to include a border or not and so on.

72
00:05:49,950 --> 00:05:51,810
So let's have a look at that as well.