WEBVTT 00:00:07.310 --> 00:00:13.490 In this video we're going to learn how to use the Jay Querrey you are free to make a shemale elements 00:00:13.500 --> 00:00:20.400 at resizable Which means what you want to be able to resize the elements using the mouse. 00:00:20.400 --> 00:00:21.030 OK. 00:00:21.240 --> 00:00:30.300 So let's start with the Facebook Dave and make these elements resizable so all we need to do is access 00:00:30.300 --> 00:00:39.980 the elements we would like to make resizable using the selector with the ID for example. 00:00:39.970 --> 00:00:49.980 So using here the idea of Facebook and then we need to use a method from the J-curve library. 00:00:49.990 --> 00:00:51.000 It's resizable 00:00:53.950 --> 00:00:55.720 right. 00:00:56.550 --> 00:00:58.280 Destroy. 00:00:59.580 --> 00:01:05.120 OK so we can see that the Facebook element now can be resized to any size we want. 00:01:05.130 --> 00:01:06.090 All right. 00:01:06.750 --> 00:01:07.210 OK. 00:01:07.530 --> 00:01:12.860 So the resizable method has codes if you options we can use. 00:01:12.870 --> 00:01:18.240 So for instance we can specify the minimum height of the elements. 00:01:18.240 --> 00:01:24.460 Also we can specify a maximum height and also a minimum with an a maximum with. 00:01:24.840 --> 00:01:31.920 So in order to use the options we need curly brackets and all the options they will go inside the credit 00:01:31.920 --> 00:01:32.630 markets. 00:01:32.940 --> 00:01:42.880 So for example we can says the max height to 200 guys we only put the value there. 00:01:42.900 --> 00:01:44.540 We don't need big. 00:01:44.760 --> 00:01:56.170 We can set the mean height for instance to 50 again to separate the options we need to use a comma. 00:01:58.120 --> 00:02:06.420 We can set some men with up to 100. 00:02:09.140 --> 00:02:10.570 OK. 00:02:11.610 --> 00:02:20.840 And then this sets a mux with as well to 300. 00:02:22.710 --> 00:02:27.570 OK let's see now. 00:02:28.380 --> 00:02:34.470 Going from the original dimensions once we solved resizing the elements and it starts taking into account 00:02:34.500 --> 00:02:35.700 these constraints. 00:02:35.700 --> 00:02:42.530 So now if we increase the width we can't go beyond 300 degrees. 00:02:42.630 --> 00:02:45.120 We have men with the same for the heights. 00:02:45.270 --> 00:02:46.450 OK. 00:02:46.860 --> 00:02:48.010 All right. 00:02:48.270 --> 00:02:49.780 There is another option we can use. 00:02:49.830 --> 00:02:54.840 Let's say we want to have the same aspect aspect ratio all the time. 00:02:54.840 --> 00:02:58.910 So let's say we want to go for four by three. 00:02:58.980 --> 00:03:02.770 We want to resize the elements by keeping the same aspect ratio. 00:03:03.090 --> 00:03:14.340 So the option we need to use is going to be aspect ratio and let's say that 2 4 by 3 for example 00:03:18.660 --> 00:03:23.000 you can see now that we are keeping the same aspect ratio. 00:03:23.670 --> 00:03:24.750 All right. 00:03:25.590 --> 00:03:26.460 There is another thing. 00:03:26.460 --> 00:03:37.170 So rather than resizing the the elements as we are dragging at the corner of the elements we can have 00:03:37.260 --> 00:03:41.340 a ghost of the final elements before. 00:03:41.350 --> 00:03:46.580 And then once we drop the elements then we can see the resizing effects. 00:03:46.920 --> 00:03:47.610 OK. 00:03:47.790 --> 00:03:57.810 So let's let's do that's the option to do this is going to be ghosts and we just need to set that to 00:03:57.810 --> 00:03:58.970 true. 00:03:59.760 --> 00:04:04.740 OK so let's see now. 00:04:04.740 --> 00:04:07.230 So now the effect of resizing 00:04:09.900 --> 00:04:11.520 will happen after we drop the mouse. 00:04:11.520 --> 00:04:18.770 But before that we can see the ghost of our elements our final elements. 00:04:18.800 --> 00:04:19.910 OK. 00:04:20.980 --> 00:04:21.870 OK. 00:04:21.900 --> 00:04:25.840 So that's how the resizable method works. 00:04:26.490 --> 00:04:31.680 Let's move to the apple live and do something a little bit different. 00:04:31.680 --> 00:04:43.080 We're going to be accessing the Apple device as we did for Facebook and we'll use the resizable method 00:04:43.110 --> 00:04:43.630 . 00:04:44.130 --> 00:04:49.850 OK first of all is make sure Apple is resizable is days. 00:04:50.150 --> 00:05:00.570 And now we're going to use another way of limiting or setting limits for the dimensions of the resizing 00:05:00.580 --> 00:05:01.010 . 00:05:01.410 --> 00:05:07.500 We're going up with Apple inside a container basically based on the dimensions of the container. 00:05:07.770 --> 00:05:12.710 The resizing of Apple will be limited. 00:05:12.810 --> 00:05:13.480 Right. 00:05:13.860 --> 00:05:18.720 So let's first of all let's have a container around the apple live 00:05:18.730 --> 00:05:24.590 . 00:05:26.460 --> 00:05:31.450 It's going to copy the contents of apple inside another day. 00:05:32.640 --> 00:05:34.210 OK. 00:05:35.200 --> 00:05:38.370 Let's call this one. 00:05:38.910 --> 00:05:41.630 Give you an ID container. 00:05:41.630 --> 00:05:46.240 All right. 00:05:46.830 --> 00:05:47.030 And 00:05:49.830 --> 00:05:50.760 let's Siletz 00:06:01.690 --> 00:06:07.440 it's a B-cells for the with and it's go for it's 00:06:11.360 --> 00:06:14.050 really excelled as well. 00:06:15.820 --> 00:06:16.120 OK 00:06:19.460 --> 00:06:24.270 let's have a for the style 00:06:31.890 --> 00:06:35.220 set to those it on. 00:06:36.310 --> 00:06:38.380 OK. 00:06:38.460 --> 00:06:42.140 So now we'd like to do we want to be able to resize the apple. 00:06:42.150 --> 00:06:46.880 They have but limits the dimensions of the resizing using the container. 00:06:47.460 --> 00:06:52.140 So the way to do that is to use an option 00:06:56.700 --> 00:06:58.560 you can guess that is going to be containments 00:07:01.260 --> 00:07:09.830 and we need to specify which elements is going to be containing our resizable elements. 00:07:09.990 --> 00:07:15.660 So in our case the ID of the risk of the containing elements is container. 00:07:16.580 --> 00:07:21.550 OK let's try now and see what happens. 00:07:21.560 --> 00:07:29.530 I mean we can see that we cannot resize the apple div beyond the contained elements. 00:07:29.940 --> 00:07:30.840 OK. 00:07:31.260 --> 00:07:34.590 And it's another option before we finish. 00:07:34.590 --> 00:07:40.340 We'll add some animation to the resizing. 00:07:40.530 --> 00:07:44.580 We're going to use the animate option that we will set. 00:07:44.580 --> 00:07:46.330 True. 00:07:46.670 --> 00:07:51.870 So the way the animation works is you see the comet. 00:07:52.360 --> 00:08:01.750 OK so now if we resize the apple Dave we can see that the resizing effect is animated. 00:08:02.940 --> 00:08:11.540 And also there is a way to make another div to be resized. 00:08:11.550 --> 00:08:20.190 Once we resize one specific thing let's say to resize the Microsoft's div as soon as we resize the Facebook 00:08:20.190 --> 00:08:27.320 Dave so to do that's going to go to the Facebook resizable method. 00:08:27.460 --> 00:08:29.130 And another option. 00:08:29.130 --> 00:08:35.020 So this one is going to be also resize. 00:08:35.700 --> 00:08:38.690 OK so what are we doing here. 00:08:39.390 --> 00:08:44.290 We are specifying which other elements we want to resize. 00:08:44.430 --> 00:08:47.590 Once we resize our Facebook. 00:08:48.140 --> 00:08:53.420 So we're going to specify which elements we are looking at it's going to be the micro's of Steve and 00:08:53.430 --> 00:08:56.920 we're going to be using the ID of Microsoft. 00:08:57.060 --> 00:09:05.600 Let's try and see now if we resize the Facebook Dave we can see that's the Microsoft is getting resized 00:09:05.600 --> 00:09:06.630 as well. 00:09:07.220 --> 00:09:07.450 OK 00:09:07.480 --> 00:09:13.530 .