JQuery Mobile fixed footer moves when keyboard appears

Question

I developed an application using Phonegap and jQuery Mobile. The fixed footer works correctly until I click on the drop-down menu or text box, because of which the footer either disappears from view (Android 4.0) or moves to the middle of the screen (Android 2.2 Galaxy Tab). Any suggestions?

Phone 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> 

Answer 1

I had a problem in some devices that displayed a footer, while others did not. 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 allows for an inaccurate calculation of the height of the landscape with the portrait width and vice versa.

Answer 2

Well, this thread is as old as the Internet at the moment, but the answer above did not help me.

The best way I've found is to bind the method to the jquery.blur () event, and then call the 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); } }, 

Answer 3

The keyboard opens when we focus on input, so:

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

Answer 4

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

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

Answer 5

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

Answer 6

My solution uses a different JQUERY attribute for the div footer. Adding data - fullscreen = "true" to this div is all I need. I know that this fix may not be 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. :)