Measure the height of keyboard on PhoneGap app using jQuery


 I have been working on a PhoneGap project where I wanted  to scroll the content up and down whenever keyboard  appears and disappears.

 After a bit of searching here and there, I found out that  whenever keyboard appears window's resize event if fired.

 So to determine height of keyboard do the following steps

 1. Inside device ready event store original window height  inside a window variable

 window.height = $(window).height();


2. Now on window resize event execute a callback function

 $(window).resize(function(){
    window.currentHeight = $(this).height();
    window.heightDiff = window.height - window.currentHeight;
 });


So whenever there is focus on an input element, window's resize event will be triggered which will execute above function and we will have the height of keyboard inside window.heightDiff variable.

Putting it all together
 function onDeviceReady() {
   window.height = $(window).height();
   $(window).resize(function(){
    window.currentHeight = $(this).height();
    window.heightDiff = window.height - window.currentHeight;
  });
 }

Comments

fancyphone said…
Thanks for publishing such excellent knowledge. You are doing such a good job. This info is very helpful for everyone. Keep it up. Thanks. Read more info about iPhone Reparation Linköping
16 December 2021 at 02:35
Mobile Repair Factory said…
You've written a fantastic article about phone repairs. This article provided me with some useful knowledge. Thank you for providing this information.
23 March 2022 at 14:51
Ralakde Limited said…
I really appreciate your work which you have shared here about the The article you have shared here is very informative and the points you have mentioned are very helpful. Thank you so much.phone repair center
29 March 2022 at 21:39

Post a Comment

Popular posts from this blog

How to get local time from UTC using Moment.JS

Image
  Moment.JS is a beautiful javascript library for parsing, validating, manipulating, and formatting dates. This is a must have utility library when it comes to manipulating timestamps and dates in javascript. Here I will show how to get local time if you have a utc date time string. Lets say you have a UTC date-time string as  2014-02-19 05:24:32 AM and you want to determine time in your timezone then use following code: moment.utc('2014-02-19 05:24:32 AM').toDate(); toDate() method gives javascript Date() object. Below I have shared an example of how to use it. You can click on JavaScript link below to see the code.
Read more

6 steps to create local copy of your live WordPress site

I know there are bunch of other posts on how to create local copy of your live WordPress site, however, they are too much descriptive. Here I will show you step by step approach rather than descriptive one. 1. Export your live database into an sql file. 2. Download/Copy your live WordPress site folder to your local machine. 3. Move your downloaded WordPress site files inside local server’s web root. 4. Open exported sql file using notepad or any other editor of your choice and replace “http://www.yoursite.com” with “http://localhost/wordpress” and Save that file. (CAUTION: This file could be very large so replacing might take time. Command for replacing file content on *nix based system.) 5. Import database from that sql file into your local mysql database. 6. Open wp-config.php file which you can find inside your copied WordPress folder. In that file replace DB_NAME with your local WordPress database which you imported in above step. DB_USER with database user name. D...
Read more

Partially rendering Handlerbars from Backbone view

Image
While working on a project I had this situation where I wanted to render a view partially after some ajax is done. In this post I will explain how to render HandlerBar views partially. For the purpose of demonstrate I will simulate delay using setTimeout() function instead of an ajax request. So for an example lets consider following setup 1. Template <script id="PersonTemplate" type="text/x-handlebars-template"> <div> {{firstName}} {{lastName}} <div> <div id="divPartial"> <a href="{{website}}">{{website}}</a> </div> </script> 2. Backbone Model var PersonModel = Backbone.Model.extend({ defaults: { firstName: 'Bharat', lastName: 'Patil', website: '' } }); 3. Backbone view using Handlerbars view var TestView = Backbone.View.extend({ //assign model view instance model: objPerson, //get the...
Read more