WEBVTT

00:00:07.210 --> 00:00:10.790
In this video we're going to learn equerry mobile events.

00:00:11.130 --> 00:00:16.680
So in take what are immobile we can use many types of events to respond to uses actions like tapping

00:00:16.680 --> 00:00:22.310
the screen or stopping an element and holding it for a second scrolling and so on.

00:00:22.320 --> 00:00:30.960
So let's go to our home page and create an example so we can create a div and write some code so that

00:00:31.080 --> 00:00:34.640
if we tap on the div the font size gets bigger.

00:00:34.890 --> 00:00:39.910
And if we it's up again the font size goes back to its original value.

00:00:40.620 --> 00:00:46.070
And if we start and hold then the def is going to disappear.

00:00:46.520 --> 00:00:47.220
OK.

00:00:47.430 --> 00:00:50.580
So this creates a new file.

00:00:50.750 --> 00:01:01.590
Colette's events events a shameful list copy the code from the previous file

00:01:06.450 --> 00:01:13.790
and change the title to events.

00:01:13.800 --> 00:01:17.700
Now let's go to the first page.

00:01:19.060 --> 00:01:22.950
This goes to the contents.

00:01:24.800 --> 00:01:26.050
OK.

00:01:26.640 --> 00:01:29.190
And let's create our div in the

00:01:33.660 --> 00:01:35.110
Saudis give it an ID

00:01:38.340 --> 00:01:39.410
top here.

00:01:39.800 --> 00:01:40.440
OK.

00:01:40.510 --> 00:01:49.850
And misplace a paragraph inside Dave and write some text.

00:01:52.260 --> 00:01:52.920
OK.

00:01:53.010 --> 00:01:56.610
Well it disappeared.

00:01:57.030 --> 00:01:58.460
So it is going to rise again.

00:01:58.460 --> 00:02:02.040
So if the top here

00:02:07.800 --> 00:02:12.400
will get bigger.

00:02:14.450 --> 00:02:23.800
If it's up again I will get back to my original size.

00:02:24.120 --> 00:02:30.070
If you type and hold it will disappear.

00:02:32.550 --> 00:02:33.050
OK.

00:02:33.300 --> 00:02:40.860
Now let's go to the end of the body elements and write some code.

00:02:41.390 --> 00:02:44.250
So going to create a script's elements.

00:02:44.600 --> 00:02:47.710
OK.

00:02:50.970 --> 00:02:59.000
And you can write our code inside the document ready function.

00:03:01.860 --> 00:03:02.580
OK.

00:03:02.970 --> 00:03:09.810
So first of all let's access the div using its ID.

00:03:11.830 --> 00:03:13.410
OK.

00:03:13.560 --> 00:03:18.920
And to start we going to use the top events.

00:03:18.960 --> 00:03:22.650
So when we come up on the Dave we want to change the font size of Dave.

00:03:22.710 --> 00:03:23.510
OK.

00:03:23.700 --> 00:03:33.570
So the method we're going to be using here is the on method which will take two promises the events

00:03:34.270 --> 00:03:39.920
in our case type and the function to execute after the events.

00:03:40.810 --> 00:03:41.600
OK.

00:03:42.390 --> 00:03:45.630
So in case you want to change the font size

00:03:49.980 --> 00:03:54.890
when we tap and go back to the original font size when we began.

00:03:54.930 --> 00:04:00.750
So what are we going to do we can to create a class and let's call that Glaus

00:04:03.300 --> 00:04:03.940
big.

00:04:04.110 --> 00:04:04.410
OK.

00:04:04.410 --> 00:04:14.970
So let's go to the head Edmond's creates a style element there and creates a class big with a big one

00:04:14.970 --> 00:04:25.050
slice of for example one size of 20 pixels and we're going to do we are going to access the elements

00:04:25.070 --> 00:04:25.730
as we typed.

00:04:25.750 --> 00:04:34.470
So we're going to use the keyword this and we're going to use the toggle class method that we apply

00:04:34.940 --> 00:04:36.270
to our class.

00:04:36.280 --> 00:04:46.800
BECK OK so now if we save and refresh if we click on our elements it gets bigger.

00:04:46.980 --> 00:04:49.530
If we click again it gets smaller.

00:04:49.590 --> 00:04:50.940
OK.

00:04:51.030 --> 00:04:57.770
Now if we tap and hold so it is going to be different.

00:04:57.780 --> 00:04:58.650
So the event

00:05:04.050 --> 00:05:10.350
is top hold OK and we're on.

00:05:10.470 --> 00:05:14.180
What to do here is hide the elements.

00:05:15.510 --> 00:05:20.350
OK so let's save and refresh.

00:05:20.380 --> 00:05:24.240
So now every top gets bigger That again gets smaller.

00:05:24.450 --> 00:05:28.900
If we tap and hold it is Appius OK.

00:05:29.160 --> 00:05:38.300
All right so you can use other events like the Swype events or swipe right or swipe left.

00:05:38.310 --> 00:05:39.100
OK.

00:05:39.540 --> 00:05:51.530
There are other events we can use like the scroll bars events that we apply to the documents for example

00:05:51.800 --> 00:05:53.480
.

00:05:54.070 --> 00:05:55.890
So on

00:05:59.430 --> 00:06:01.830
this how the inside the documents really function

00:06:14.370 --> 00:06:21.090
on scroll starts ok or scroll up and then the function

00:06:23.840 --> 00:06:26.710
OK.

00:06:29.110 --> 00:06:36.540
Also you can use the orientation change events as we can apply with the window

00:06:43.050 --> 00:06:43.770
like this.

00:06:43.920 --> 00:06:45.020
OK.

00:06:45.570 --> 00:06:55.550
And for example you can check in the function if the orientation is a landscape or portrait.

00:06:55.650 --> 00:06:56.270
OK.

00:06:56.370 --> 00:07:10.650
So to check if it's one of these we need to use the events object and then the orientation

00:07:13.710 --> 00:07:14.240
property.

00:07:14.370 --> 00:07:18.890
OK so for portraits it's going to be zero.

00:07:19.200 --> 00:07:20.590
OK.

00:07:20.730 --> 00:07:22.320
And let's say

00:07:26.250 --> 00:07:28.740
you want to alert a message

00:07:32.520 --> 00:07:34.340
portrait's OK.

00:07:34.410 --> 00:07:35.160
Otherwise

00:07:46.340 --> 00:07:49.020
we are that landscape

00:07:49.020 --> 00:07:56.700
.

00:07:56.700 --> 00:08:03.180
All right so that was a good overview of D-CT immobile where we went through the different features

00:08:03.180 --> 00:08:10.350
of G.A.R. immobile so in the next session we are going to build a real mobile app and learn how to upload

00:08:10.350 --> 00:08:13.020
it to the Google Play and AppStore