window.resize due to virtual keyboard causes issues with jquery mobile

Question

I\'m hitting an unusual problem and I\'m looking for suggestions. Basically, I\'m using:

• JQuery Mobile 1.1
• JQuery 8.2
• PhoneGap (Cordova) 2.1

Answer 1

I'm glad to see I'm not crazy! I'm happy to report I've implemented a pretty good solution. Here are the steps, in case you'd like to do the same:

1) Go into jquery.mobile-1.x.x.js

2) Find $.mobile = $.extend() and add the following attributes:

last_width: null,
last_height: null,

3) Modify getScreenHeight to work as follows:

getScreenHeight: function() {
    // Native innerHeight returns more accurate value for this across platforms,
    // jQuery version is here as a normalized fallback for platforms like Symbian

    if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
    {
        this.last_height = window.innerHeight || $( window ).height();
        this.last_width = $(window).width();
    }
    return this.last_height;
}

Basically this will prevent jQuery from recalculating the page height unless the width also changes. (i.e. an orientation change) Since the soft keyboard only affects the height, this method will returned the cached value instead of a modified height.

I'm going to create a separate post to ask how to properly override the $.mobile.getScreenHeight method. I tried adding the code below into a separate JS file, but it didn't work:

delete $.mobile.getScreenHeight;
$.mobile.last_width = null;
$.mobile.last_height = null;
$.mobile.getScreenHeight = function() 
{
   ... the code listed above
}

It fired most of the time, but also fired the original function. Kinda weird. I've posted a separate topic in regard to how to properly extend $.mobile here: Proper way to overide a JQuery Mobile method in $.mobile