jQuery Mobile fixed footer is moving when the keyboard appears

I have designed an app using Phonegap and jQuery Mobile. The fixed footer works properly until I click on a dropdown or text field, which causes the footer to either disappear from view (Android 4.0) or move to the middle of the view (Android 2.2 Galaxy Tab). Any suggestions?

Phonegap Version: Cordova 2.1.0
jQuery Mobile Version: 1.2.0

  • ionic cordova splashcreens / icons
  • PhoneGap missing plist.key
  • Are there any standards for mobile device web browsers in terms of thread sleeping?
  • Rhomobile vs. Phonegap considerations
  • Custom Cordova Plugin: Add framework to “Embedded Binaries”
  • From where can I change refresh rate for app already in App Store?
  • Here is my code:

    <div data-role="footer" class="nav-mobilyzer" data-tap-toggle="false" data-position="fixed">
      <div data-role="navbar" class="nav-mobilyzer" data-grid="d">
        <h1>footer</h1>        
      </div>
    </div>
    

    6 Solutions Collect From Internet About “jQuery Mobile fixed footer is moving when the keyboard appears”

    I had the problem in some devices the footer displayed and in others it didn’t. I found this worked for me:

    var initialScreenSize = window.innerHeight;
    window.addEventListener("resize", function() {
        if(window.innerHeight < initialScreenSize){
            $("[data-role=footer]").hide();
        }
        else{
            $("[data-role=footer]").show();
        }
    });
    

    EDIT:

    But what about orientation changes?

    var portraitScreenHeight;
    var landscapeScreenHeight;
    
    if(window.orientation === 0 || window.orientation === 180){
        portraitScreenHeight = $(window).height();
        landscapeScreenHeight = $(window).width();
    }
    else{
        portraitScreenHeight = $(window).width();
        landscapeScreenHeight = $(window).height();
    }
    
    var tolerance = 25;
    $(window).bind('resize', function(){
        if((window.orientation === 0 || window.orientation === 180) &&
           ((window.innerHeight + tolerance) < portraitScreenHeight)){
            // keyboard visible in portrait
        }
        else if((window.innerHeight + tolerance) < landscapeScreenHeight){
            // keyboard visible in landscape
        }
        else{
            // keyboard NOT visible
        }
    });
    

    The tolerance accounts for the inexact calculation of landscape height with portrait width and vis-versa.

    Okay, this thread is as old as the internet at this point, but the answer above didn’t seem to do the job for me.

    The best way I found was to bind a method to the jquery .blur() event, and then call fixedtoolbar() methods in a very specific order, i.e.

        var that = this;
        $(':input').blur(function(){
            that.onFocusLoss();
        });
    

    ……

    onFocusLoss : function() {
        try {
            $("[data-position='fixed']").fixedtoolbar();
            $("[data-position='fixed']").fixedtoolbar('destroy');
            $("[data-position='fixed']").fixedtoolbar();
            console.log('bam');
        } catch(e) {
            console.log(e);
        }
    },
    

    The keyboard is opened when we have the focus on an input so:

    // hide the footer when input is active
    $("input").blur(function() {
        $("[data-role=footer]").show();
    });
    
    $("input").focus(function() {
        $("[data-role=footer]").hide();
    });
    

    You can also detect when the keyboard shows and when it hides and show or hide your footer accordingly:

    document.addEventListener("showkeyboard", function(){ $("[data-role=footer]").hide();}, false);
    document.addEventListener("hidekeyboard", function(){ $("[data-role=footer]").show();}, false);
    

    Try data-hide-during-focus=”” and set it to an empty string.

    My solution uses another JQUERY attribute on the div footer. Adding data-fullscreen=”true” to that div was all I needed. I know that this fix might not have been available until recently, but I am using jqm 1.3.2 and jq 1.9. I thought I would post this solution just in case it helps someone. Good luck. 🙂