1
00:00:00,470 --> 00:00:08,510
OK, so we can see the problem with a class setup where essentially I would need to guess how many links

2
00:00:08,510 --> 00:00:12,380
I have and then adjust my height depending on that.

3
00:00:12,740 --> 00:00:19,430
And of course, I would want to make it dynamic where depending on my legs, I'll have the height for

4
00:00:19,430 --> 00:00:20,250
my container.

5
00:00:20,540 --> 00:00:21,530
So how do we do that?

6
00:00:21,560 --> 00:00:26,510
Well, first, I'm going to go back to 10 grams, even though technically we won't use this class at

7
00:00:26,510 --> 00:00:26,710
all.

8
00:00:27,200 --> 00:00:32,990
And then I would want to navigate back to number and remove that class as well.

9
00:00:33,220 --> 00:00:39,410
And by the way, we really wanted to we can go back to the simple class name, which is exactly what

10
00:00:39,410 --> 00:00:40,070
I'm going to do.

11
00:00:40,340 --> 00:00:42,620
So I'm going to say Linc's container.

12
00:00:43,040 --> 00:00:49,790
Just so you don't think that there's some black magic happening and we go back to the container and

13
00:00:49,790 --> 00:00:52,920
we already know that in the CNS, of course, we hide it.

14
00:00:53,420 --> 00:00:55,900
So this one won't change.

15
00:00:56,000 --> 00:00:57,960
We'll just leave it the way it is.

16
00:00:57,980 --> 00:01:02,980
However, in a number, I would want to start using the use ref.

17
00:01:03,530 --> 00:01:10,490
So what I would want is to set up two users, one for the container and then the second one for the

18
00:01:10,490 --> 00:01:10,820
lunch.

19
00:01:11,150 --> 00:01:15,280
And yes, to answer the question, I did that on purpose.

20
00:01:15,410 --> 00:01:21,340
So we'll have to have some kind of and closing container and I'll show you that at the very, very end.

21
00:01:21,650 --> 00:01:24,170
So we have like a container and then we have lunch.

22
00:01:24,470 --> 00:01:28,280
And now I would want to set up to use Arapahos hooks.

23
00:01:28,610 --> 00:01:32,720
So we go where we have the state's values and we're going to go with links.

24
00:01:33,980 --> 00:01:42,020
Container, if not, of course, will be equal to a USRAP and Will passino will copy and paste and I'll

25
00:01:42,020 --> 00:01:43,780
just call this one Lynx.

26
00:01:44,540 --> 00:01:48,720
So this is going to be four on our list and then this is for the deaf.

27
00:01:49,160 --> 00:01:51,760
OK, hopefully that is clear.

28
00:01:52,100 --> 00:01:58,250
And then once we have the setup, remember, we just needed to add that RF attribute and now this is

29
00:01:58,250 --> 00:02:03,170
going to point to a Linc's container and then this will point to a link.

30
00:02:03,800 --> 00:02:06,590
So we go with the ref and we go with links.

31
00:02:06,960 --> 00:02:17,630
And so once I have both of these, what I would want is every time the value for shoaling changes,

32
00:02:17,630 --> 00:02:19,750
I would want to run my usufruct.

33
00:02:20,060 --> 00:02:23,840
So what we need to do is import usufruct, which of course we already did.

34
00:02:24,080 --> 00:02:25,700
Then we go with years of fact.

35
00:02:26,180 --> 00:02:27,980
It is our callback function, of course.

36
00:02:28,220 --> 00:02:35,270
And then I'm going to say every time the show links changes, I would want to run my callback function

37
00:02:35,780 --> 00:02:43,150
and essentially in a callback function, what I would want is check the height for the length.

38
00:02:43,430 --> 00:02:44,520
And that is very important.

39
00:02:44,840 --> 00:02:51,710
We're not talking about links container, so we'll use the height of the length to adjust the height

40
00:02:51,710 --> 00:02:53,030
of the container.

41
00:02:53,180 --> 00:02:57,440
And the way we can check the height for the length is in the following way.

42
00:02:57,440 --> 00:03:00,290
So I'm going to come up with some kind of name of the variable.

43
00:03:00,650 --> 00:03:03,110
So height seems like a good name.

44
00:03:03,380 --> 00:03:05,420
And then we go with Length Araf.

45
00:03:05,900 --> 00:03:07,750
So I'm talking about this guy over here.

46
00:03:08,110 --> 00:03:11,390
Then remember the node was in the current.

47
00:03:11,390 --> 00:03:11,840
Correct.

48
00:03:12,170 --> 00:03:21,910
And then in Scotland we have this function of get bounding and then client and then erect like so and

49
00:03:21,980 --> 00:03:24,710
what this does it return some awesome values.

50
00:03:24,980 --> 00:03:26,240
So we're going to go with Longsight.

51
00:03:27,230 --> 00:03:33,320
When we're here, let's just check it out on a bigger screen and I mean, it's not going to be that

52
00:03:33,320 --> 00:03:39,440
big, but if we go with console and if I click, I mean, this value should be changing, by the way.

53
00:03:39,470 --> 00:03:40,970
Of course, I'm in a complete one.

54
00:03:41,060 --> 00:03:41,280
My.

55
00:03:41,870 --> 00:03:47,670
So if we go here and not if we inspect console, we should see some progress.

56
00:03:48,020 --> 00:03:49,520
So what are these values?

57
00:03:50,030 --> 00:03:56,450
Well, this is going to be the X, coordinate the Y, coordinate the width as well as the height.

58
00:03:57,020 --> 00:04:01,300
So this tells me, hey, this is the height for Mylan's.

59
00:04:01,700 --> 00:04:04,990
So what I would want is to grab this volume.

60
00:04:05,350 --> 00:04:09,470
And that's why I'm looking for the height property from that object.

61
00:04:09,770 --> 00:04:14,150
And then I would want to manually update the container.

62
00:04:14,570 --> 00:04:18,770
So I'll always check the length, what is the height for the length?

63
00:04:19,160 --> 00:04:23,240
And then depending on that, I will change the height for the length container.

64
00:04:23,270 --> 00:04:30,380
However, I would want to do that in the condition where I'm going to say if show is true, that means

65
00:04:30,380 --> 00:04:31,640
that I would want to display the links.

66
00:04:31,700 --> 00:04:32,110
Correct.

67
00:04:32,420 --> 00:04:35,390
And if that is the case, I'm going to go for my container.

68
00:04:35,730 --> 00:04:38,270
Then I remember node was in the current one.

69
00:04:38,570 --> 00:04:40,370
Then we'll do the inline style again.

70
00:04:40,380 --> 00:04:46,640
This is just JavaScript where we go with style and then we're looking for the height property and that

71
00:04:46,640 --> 00:04:47,680
is equal.

72
00:04:47,720 --> 00:04:52,220
And now I'm going to set up my template string and I'm going to say length, height.

73
00:04:52,400 --> 00:04:53,120
So whatever.

74
00:04:53,120 --> 00:04:57,540
I'm getting back as height, by the way, where we have to get bounding client tracked.

75
00:04:57,860 --> 00:05:01,970
Since I would want to access that property, I'm just going to go with height then.

76
00:05:02,120 --> 00:05:05,570
This is coming from the object right here.

77
00:05:05,870 --> 00:05:10,850
And then I'm going to go to my variable lengths, height, and then I'll add pixels.

78
00:05:11,120 --> 00:05:18,890
However, if the shoaling is not true, what I would want is lnx container RF than current.

79
00:05:19,320 --> 00:05:25,340
And then we go with style and then height and I will be equal to zero pixels.

80
00:05:25,760 --> 00:05:29,720
So we go here with zero pixels like so.

81
00:05:30,140 --> 00:05:30,850
And now what.

82
00:05:30,860 --> 00:05:40,850
You'll notice that once the show length changes we're going to check the height for the length, for

83
00:05:40,850 --> 00:05:41,550
the length.

84
00:05:42,140 --> 00:05:45,290
So the unordered list, not the container.

85
00:05:45,650 --> 00:05:51,090
And then depending what is the value for the show length will adjust the height for the container.

86
00:05:51,480 --> 00:05:52,450
So now check it out.

87
00:05:52,850 --> 00:05:56,780
I can see all my five links and what's really cool.

88
00:05:57,080 --> 00:06:00,120
And of course, the change is happening over time.

89
00:06:00,290 --> 00:06:06,950
So now if I go to data, for example, coming out and now I only have four links, you'll notice that

90
00:06:07,160 --> 00:06:08,660
our functionality still works.

91
00:06:09,200 --> 00:06:13,320
But now I can clearly see my four oinks.

92
00:06:13,340 --> 00:06:19,310
See how we're adjusting the height for the container, depending on how many links we have.

93
00:06:19,730 --> 00:06:22,640
And Pugach that I would want to mention, first of all.

94
00:06:23,650 --> 00:06:30,100
If you navigate to infectiousness, you'll notice that when we talk about the media, query the eight

95
00:06:30,100 --> 00:06:35,510
hundred pixels, we must this height order and then important.

96
00:06:35,780 --> 00:06:40,270
Now, the reason why we're adding important because in here, this is in line.

97
00:06:40,960 --> 00:06:46,470
So we need to make sure that we overwrite any values in our index.

98
00:06:47,110 --> 00:06:54,190
And the reason why we're adding that, because if your comment is out and if you'll test it out on a

99
00:06:54,190 --> 00:07:01,270
bigger browser window, you'll notice that if, for example, I hide my links by default, I'm not going

100
00:07:01,270 --> 00:07:02,720
to be able to see them on a big screen.

101
00:07:02,980 --> 00:07:03,400
Why?

102
00:07:03,490 --> 00:07:07,090
Well, because now the height, of course, is set to zero.

103
00:07:07,390 --> 00:07:13,260
That's why in the US we always need to change it when the screen size gets bigger.

104
00:07:13,600 --> 00:07:16,210
So always, always make sure you do that.

105
00:07:16,520 --> 00:07:22,200
Otherwise, if you hide the links on a small screen, you won't be able to see them on a big screen.

106
00:07:22,450 --> 00:07:29,880
And then the second thing that I would want to add is the reason why we have this inclosing there.

107
00:07:30,280 --> 00:07:38,350
And that's the one that we're adjusting to hide, is because if you have only the on order list, because

108
00:07:38,350 --> 00:07:42,510
in the success, you already have the height of zero.

109
00:07:42,640 --> 00:07:46,210
Remember, for the container, we right away added the height of zero.

110
00:07:46,540 --> 00:07:53,680
When you will be checking for that value and the user, it will also come back as zero.

111
00:07:54,010 --> 00:07:57,830
So you won't be able to adjust the height depending on it.

112
00:07:58,450 --> 00:08:06,610
Now, just the shock that if we go with console log and I'm looking for links, container container

113
00:08:06,850 --> 00:08:13,570
rough and I'm looking for current, of course, then again, the function and then I would want to check

114
00:08:13,750 --> 00:08:16,730
the heart, OK, or I can just check the whole object.

115
00:08:16,750 --> 00:08:20,260
Doesn't matter what you'll notice that once you click.

116
00:08:21,560 --> 00:08:28,070
On the button, well, the height is going to be zero, so you won't be able to do that functionality

117
00:08:28,100 --> 00:08:30,500
if you don't have that apparent one.

118
00:08:31,140 --> 00:08:37,460
OK, so you must have the parent because you'll be able to access those links inside of it.

119
00:08:37,820 --> 00:08:43,310
So previously, remember, we were able to access the height because for the links, the height came

120
00:08:43,310 --> 00:08:44,210
back as some kind of.

121
00:08:44,780 --> 00:08:50,780
So if you won't have that parent one, you won't be able to do that, because in this one right away

122
00:08:50,990 --> 00:08:52,140
is zero.

123
00:08:52,520 --> 00:08:54,680
OK, hopefully that makes sense.

124
00:08:54,950 --> 00:09:01,210
And this is how we can set up the knife, toggle on a small screen using use or.