WEBVTT 00:00:07.500 --> 00:00:13.580 In this video are we going to get introduced to some properties of the window and screen objects. 00:00:13.830 --> 00:00:18.480 OK so first of all let's have a look at a few examples. 00:00:18.480 --> 00:00:23.920 So let's say we would like to guess the heights of our browser window. 00:00:24.030 --> 00:00:33.630 So we're going to create a veritable window heights and we're going to set it to window dogs on the 00:00:33.630 --> 00:00:34.490 property we need to use. 00:00:34.490 --> 00:00:36.580 Here is the height. 00:00:37.070 --> 00:00:37.630 OK. 00:00:37.740 --> 00:00:39.630 So let's send an alert message 00:00:45.750 --> 00:00:49.650 using this variable and see what our window height. 00:00:49.650 --> 00:00:57.420 So it's 631 pixels which is the distance from there to that. 00:00:57.700 --> 00:00:58.860 OK. 00:00:58.980 --> 00:01:02.140 So that's how we get the window height. 00:01:02.160 --> 00:01:05.930 There are other things I need to use for other browsers. 00:01:06.450 --> 00:01:14.700 If you want our code to work for most browsers we can add each of those indexes so the first one we 00:01:14.700 --> 00:01:17.450 can add is using vertical bars. 00:01:17.880 --> 00:01:23.720 So the other one is documents that document elements. 00:01:24.030 --> 00:01:26.060 Client sites. 00:01:26.210 --> 00:01:28.060 OK. 00:01:28.920 --> 00:01:32.460 The other one is documents body 00:01:36.140 --> 00:01:37.270 Glatze sites. 00:01:37.740 --> 00:01:41.810 OK. 00:01:42.100 --> 00:01:43.650 You can see that it's working. 00:01:43.650 --> 00:01:49.020 So basically if you want to make sure that our code works for most browsers we need to bear this in 00:01:49.020 --> 00:01:49.580 mind. 00:01:49.800 --> 00:01:50.980 OK. 00:01:51.090 --> 00:01:51.860 All right. 00:01:52.360 --> 00:01:55.830 Elise comments the last message and move to something else. 00:01:55.830 --> 00:02:04.910 Now let's say we would like to access the width of the user's screen so the user's screen is. 00:02:05.140 --> 00:02:09.310 So the with is going to be the whole with all the screen and not only the browser. 00:02:09.540 --> 00:02:11.840 OK so we're looking at the whole screen design. 00:02:12.420 --> 00:02:17.500 So we're going to just create another variable we're going to call it screen with. 00:02:17.840 --> 00:02:19.610 OK. 00:02:19.650 --> 00:02:25.500 And the syntax is going to be a window screen. 00:02:25.800 --> 00:02:26.660 OK. 00:02:26.720 --> 00:02:30.780 And we need the width so it's going to be dot away. 00:02:31.210 --> 00:02:36.430 And if we send that to an alert message. 00:02:36.660 --> 00:02:42.080 So when do not alert screen with 00:02:45.000 --> 00:02:51.360 so we can see that's the screen I'm using at the moment has got a week off of twelve hundred eighty 00:02:51.360 --> 00:02:52.710 pixels. 00:02:52.740 --> 00:02:53.540 All right. 00:02:54.230 --> 00:02:55.840 OK. 00:02:55.920 --> 00:03:00.510 So if we want to get the word for do we know it's exactly the same thing we just change the height by 00:03:00.510 --> 00:03:03.600 the way it's similar to that for the screen heights. 00:03:03.660 --> 00:03:05.270 We just need to change the way too. 00:03:05.410 --> 00:03:06.660 Right. 00:03:06.660 --> 00:03:07.270 OK. 00:03:07.440 --> 00:03:11.520 So now let's have a look at another example. 00:03:11.520 --> 00:03:16.360 So now let's guess the available height of our screen. 00:03:16.380 --> 00:03:23.490 So the available Heights is difference from the heights because if we had our task bar here basically 00:03:23.490 --> 00:03:27.800 the available height would be less than the actual height of the whole screen. 00:03:27.990 --> 00:03:29.100 OK. 00:03:29.100 --> 00:03:35.810 So in our case let's let's have a look since we don't have any task bar there so let's see available 00:03:36.090 --> 00:03:42.690 it's Chris variable available screen height. 00:03:42.970 --> 00:03:51.060 I'm going to set it to window screen and the property the property we need here is avail heights. 00:03:51.510 --> 00:03:51.750 OK 00:03:54.450 --> 00:03:56.630 let's send this message 00:04:03.820 --> 00:04:05.970 and we can see those heights. 00:04:06.030 --> 00:04:10.510 In our case the available height is 720 pixels. 00:04:10.510 --> 00:04:11.810 All right. 00:04:13.040 --> 00:04:13.340 OK. 00:04:13.350 --> 00:04:20.130 Now we can use these concepts to build something now so we would like to be able to we would like to 00:04:20.130 --> 00:04:22.200 have on our page. 00:04:22.350 --> 00:04:24.670 We want for dibs. 00:04:24.690 --> 00:04:27.480 All of them with equal dimensions. 00:04:27.470 --> 00:04:31.050 And we want them to fit all on the page. 00:04:31.050 --> 00:04:36.570 So he wants Div 1 to be the Div 2 there 3 and then four. 00:04:36.910 --> 00:04:40.770 OK so we're going to need the width of our window. 00:04:41.160 --> 00:04:47.430 And then also we need to use the height of the window to set the dimensions of those dips. 00:04:47.820 --> 00:04:49.690 OK. 00:04:49.830 --> 00:04:55.500 So first of all let's create those dips in the body element so 00:05:03.570 --> 00:05:04.200 OK so 00:05:07.030 --> 00:05:19.000 give us an idea first first me is going to be Div 1 and it's not some text so a Div 1 second one is 00:05:19.000 --> 00:05:26.430 going to be deep 2 3 4 2 3 and 4. 00:05:26.980 --> 00:05:27.640 OK. 00:05:28.000 --> 00:05:35.260 We need to change your style of these days to get some some background color. 00:05:36.450 --> 00:05:44.820 OK so for div 1 we're using ID here. 00:05:46.380 --> 00:05:47.250 So we want a 00:05:51.540 --> 00:05:56.940 background color. 00:05:57.070 --> 00:06:02.810 OK let's use this color for example 00:06:04.670 --> 00:06:09.810 . 00:06:16.000 --> 00:06:22.080 And we did two three and four. 00:06:22.380 --> 00:06:33.000 And let's just change this using another color example this one with this one. 00:06:33.660 --> 00:06:35.190 Let's go for another color. 00:06:35.380 --> 00:06:40.700 It's use for instance something like this. 00:06:41.020 --> 00:06:41.860 And the last one 00:06:45.060 --> 00:06:45.750 it's use 00:06:49.050 --> 00:06:49.760 orange color. 00:06:49.890 --> 00:06:50.740 That's fine. 00:06:50.850 --> 00:06:52.960 OK. 00:06:52.980 --> 00:07:01.010 All right so now we've got our four tips so you can see the other moments the heights and the with the 00:07:01.010 --> 00:07:02.370 all those. 00:07:02.780 --> 00:07:03.890 Oh. 00:07:04.500 --> 00:07:05.600 Well we'd like to do. 00:07:05.600 --> 00:07:09.800 Now we want these divas to sit side by side. 00:07:09.880 --> 00:07:16.170 We want each of them to have a with which is more or less one quarter of the width of our page and also 00:07:16.170 --> 00:07:16.870 the heights. 00:07:17.070 --> 00:07:22.900 So we want them to occupy the whole height of the window more or less. 00:07:22.890 --> 00:07:25.260 OK. 00:07:25.950 --> 00:07:32.590 So up first if you want them to be sitting side by side we're going to make them all floating left. 00:07:32.860 --> 00:07:33.750 OK. 00:07:33.750 --> 00:07:39.050 So one way of doing that is by giving them a glass and make them all closer. 00:07:39.070 --> 00:07:46.000 So we're going to give them a gloss and say for instance equal books. 00:07:48.370 --> 00:07:51.000 OK. 00:07:51.300 --> 00:07:56.150 Same thing with them they're going to have the same clothes. 00:07:56.400 --> 00:08:02.620 Then we can style these gloves. 00:08:02.820 --> 00:08:13.730 So cool books and we wants the flutes property to be set to left for all of them. 00:08:14.030 --> 00:08:14.500 OK. 00:08:14.560 --> 00:08:16.410 And now we can see that all of them now. 00:08:16.620 --> 00:08:21.380 They are sitting side by side with the floats prop.. 00:08:21.750 --> 00:08:22.680 OK. 00:08:23.220 --> 00:08:31.440 Now we can start looking at the width of these dips and we're going to need the width of the window 00:08:32.000 --> 00:08:34.760 to set the new width of each of these leaves. 00:08:35.380 --> 00:08:36.330 OK. 00:08:36.780 --> 00:08:42.080 So let's start with the first step. 00:08:42.180 --> 00:08:48.030 So all we need to do is to access the div using the elements by ID. 00:08:48.030 --> 00:08:48.790 OK. 00:08:48.930 --> 00:08:59.040 And then we're going to go to the style with the div and sets the with two one quarter of the width 00:08:59.110 --> 00:09:00.530 of the window. 00:09:00.880 --> 00:09:02.260 OK. 00:09:02.860 --> 00:09:03.760 So let's do that. 00:09:03.750 --> 00:09:15.010 So we're going to need the elements by id method and we are looking at this one. 00:09:15.120 --> 00:09:19.980 All right and then style with. 00:09:20.010 --> 00:09:27.560 And we are sitting there with two window dots in a with. 00:09:28.860 --> 00:09:34.210 OK divided by four. 00:09:35.760 --> 00:09:45.950 Basically we're going to take out about 10 pixels because we would like to add some margin later and 00:09:46.000 --> 00:09:52.170 we shouldn't forget to add a string here pixels. 00:09:52.620 --> 00:09:55.660 So let's see what he gets if you refresh the page. 00:09:56.760 --> 00:10:01.680 OK so now we can see the width has changed and it's more or less just less than a quarter of the width 00:10:01.680 --> 00:10:03.540 of the of the window. 00:10:03.540 --> 00:10:04.330 All right. 00:10:04.800 --> 00:10:11.250 And we can do the same thing for the height's OK. 00:10:11.380 --> 00:10:18.210 So rather than using with we you're just going to use heights and we are setting this to the heights 00:10:19.920 --> 00:10:22.650 of the window. 00:10:23.520 --> 00:10:27.540 Let's keep it minus 10 pixels. 00:10:27.660 --> 00:10:32.310 OK let's see what we get. 00:10:35.670 --> 00:10:36.050 OK. 00:10:36.100 --> 00:10:42.630 We can divide by four actually because we are getting to a more or less the same heights as the height 00:10:42.630 --> 00:10:43.450 of the window. 00:10:43.620 --> 00:10:43.920 All right. 00:10:43.910 --> 00:10:47.460 And it's working legist Commons this alert message 00:10:53.570 --> 00:10:55.120 is this. 00:10:55.890 --> 00:11:00.790 OK OK so now we can see that's the first Dave. 00:11:01.150 --> 00:11:03.810 As goes the dimensions we are after. 00:11:03.960 --> 00:11:04.420 OK. 00:11:04.600 --> 00:11:07.630 So we want to want to do the same thing for the other digits. 00:11:07.800 --> 00:11:15.400 So rather than doing a writing some code for each of these days there is a better way is by using a 00:11:15.390 --> 00:11:16.350 for loop. 00:11:16.620 --> 00:11:22.000 So we going to do we're just going to have a look at what we are repeating here. 00:11:22.090 --> 00:11:28.030 So if you repeat the same code all we're going to need to change is the barometer that we have there 00:11:28.020 --> 00:11:28.340 . 00:11:28.360 --> 00:11:32.000 So rather than what we're going to have Div 2 3 4. 00:11:32.220 --> 00:11:34.470 OK four for both lines. 00:11:34.680 --> 00:11:35.880 So what are you going to do. 00:11:35.880 --> 00:11:39.900 We're going to use a for loop so. 00:11:42.270 --> 00:11:46.030 So the piece of code to run is going to be this. 00:11:46.050 --> 00:11:46.690 OK. 00:11:46.950 --> 00:11:51.980 If we set a variable. 00:11:52.760 --> 00:11:54.680 Yeah. 00:11:54.880 --> 00:11:57.670 So rather than Dave we're going to have Dave plus. 00:11:57.770 --> 00:11:58.840 Oh boy. 00:11:59.480 --> 00:12:00.960 OK. 00:12:01.150 --> 00:12:02.170 And the same thing. 00:12:02.320 --> 00:12:04.220 Dave plus boy 00:12:08.220 --> 00:12:09.820 and we are in the chasing. 00:12:10.110 --> 00:12:18.410 I one at the beginning and then he wants me to be less than five. 00:12:18.540 --> 00:12:21.850 He goes up by one every time. 00:12:22.630 --> 00:12:25.620 OK so let's try it now and see. 00:12:26.130 --> 00:12:27.090 OK. 00:12:27.100 --> 00:12:29.070 So we get exactly what we wanted. 00:12:29.080 --> 00:12:36.480 So now we can see that all these they are sitting side by side and their dimensions are exactly what 00:12:36.480 --> 00:12:42.130 we wanted to know let's just add some more styling here. 00:12:42.150 --> 00:12:44.750 So it is odd a margin left. 00:12:45.070 --> 00:12:54.400 This separates these days is go for five pixels.