Javatpoint Logo
Javatpoint Logo

Detecting Gesture

The gesture technology allows us to interact with the device without touching the screen. The PhoneGap doesn't support the gestures naturally. For this purpose, we will use the Hammer min and time JavaScript library because it is one of the most important part for creating a mobile application. There are two problems, i.e., JavaScript is built for a browser. The hammer gives us the gestures, and the hammer time gives us the actual library. Now, we will install these libraries. We will use the following steps to set up and add hammer library in our application:

1) Create a new project

Firstly, we will create a new PhoneGap project with a blank template. If you don't know how to create an app with a blank template, go through the PhoneGap project link.

Detecting Gesture

2) Download hammer.js file

Now, we will go to the http://hammerjs.github.io/ link and click on the Hammer.min.js option. This click will open the code of the hammer.min.js file. We will copy the complete code and paste it in our suitable editor. After that, we will save it in the www folder of our application with the name hammer.js.

Detecting Gesture
Detecting Gesture
Detecting Gesture
Detecting Gesture

3) Download hammer-time.js file

Now, we will copy the content of the hammer-time.js file from the http://hammerjs.github.io/dist/hammer-time.min.js link. We will paste it and save it with the name of hammertime with JavaScript extension. We will also save it in the www folder of our application.

Detecting Gesture

4) Adding hammer and hammer-time in our index.html file

Now, we will add both the libraries in our index.html file. We will use the <script></script> tag and use the src property of it to add these two libraries in the file. We will use the <script></script> tag in the following way:

5) Creating UI

Now, we will create a user Interface for the gesture. We will create two <div></dvi> tags, i.e., one for gesture and one for result. After that, we will add the script in the body section. This will play the same role as the window.onload function works. In this script, we will get the element on which we perform the gesture and create a new hammer just below the element.

Now, we will make a statement to get the result and show result. The complete body section will be coded in the following way:


Detecting Gesture

6) Change the style of gestureDiv

Now, we will change the style of the gestureDiv by using <style></style> tag. We will set the width to 300 pixels, height to 400 pixels, background color to red, and border to 1-pixel solid black. We will also add a title for our application also.

Now, we are ready to run our project in our PhoneGap Developer App.

Complete Code

Output

Detecting Gesture
Next TopicSwipes & pans




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA