jQuery Mobile fixed footer is moving when the keyboard appears

Question

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

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>

have you seen the answers to a similar question here: http://stackoverflow.com/questions/6861764/jquery-mobile-stick-footer-to-bottom-of-page — Taifun, Oct 27 '12 at 17:07
here is my solution to the problem http://stackoverflow.com/questions/13097663/jquery-mobile-fixed-footer-is-moving-when-the-keyboard-appears/29415239#29415239 — eliprodigy, Apr 02 '15 at 14:28

score 14 · Answer 1 · edited Sep 10 '13 at 14:56

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.

for IOS see http://stackoverflow.com/questions/11600040/jquery-js-html5-change-page-content-when-keyboard-is-visible-on-mobile-devices — gmh04, Nov 01 '12 at 11:48
i m new to ionic how to use this code ? i m facing same issue @gmh04 — Erum, Apr 30 '15 at 12:34

score 3 · Answer 2 · answered Jan 25 '13 at 15:37

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);
    }
},

score 3 · Answer 3 · edited Nov 17 '14 at 12:44

3

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();
});

edited Nov 17 '14 at 12:44

user456584

86,427
15
75
107

answered Apr 26 '13 at 07:44

Remy Mellet

1,675
20
23

score 1 · Answer 4 · answered Jun 25 '14 at 11:33

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);

score 0 · Answer 5 · answered Mar 19 '14 at 14:15

0

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

answered Mar 19 '14 at 14:15

mohan21

11

Hi Mohan, your answer seems to be too small to match Stackoverflow standard, It will nice if your answers are always in detail (but to the point) with the code you expect to be helpful. – Vasim Mar 19 '14 at 14:33

score 0 · Answer 6 · answered Oct 01 '15 at 17:31

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. :)

jQuery Mobile fixed footer is moving when the keyboard appears

6 Answers6

Linked