jQuery Mobile footer fisso si muove quando appare la tastiera

Question

Ho progettato un'app utilizzando Phonegap e jQuery Mobile. Il footer fisso funziona correttamente finché non faccio clic su un menu a discesa o su un campo di testo, che fa sì che il piè di pagina scompaia dalla vista (Android 4.0) o si sposti al centro della vista (scheda Android 2.2 Galaxy). Eventuali suggerimenti?

PhoneGap Versione: 2.1.0 Cordova
jQuery Mobile Versione: 1.2.0

Ecco il mio codice:

<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

ho avuto il problema in alcuni dispositivi piè di pagina visualizzata e in altri non l'ha fatto. Ho trovato questo ha funzionato per me:

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

EDIT:

Ma per quanto riguarda i cambiamenti di orientamento?

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

I conti di tolleranza per il calcolo inesatto dell'altezza orizzontale con larghezza verticale e viceversa.

Answer 2

Ok, questo thread è vecchio come Internet a questo punto, ma la risposta di cui sopra non sembra fare il lavoro per me.

Il modo migliore che ho trovato è stato quello di associare un metodo per l'evento jQuery .blur(), e quindi chiamare i metodi fixedtoolbar() in un ordine ben preciso, vale a dire

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

la tastiera è aperta quando abbiamo il fuoco su un ingresso così:

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

$("input").focus(function() { 
    $("[data-role=footer]").hide(); 
}); 

Answer 4

Try dati-rifugio durante la messa a fuoco = "" e impostarlo su un stringa vuota.

Answer 5

Si può anche rilevare quando il display e della tastiera quando si fa scudo e mostrare o nascondere il proprio piè di conseguenza:

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

Answer 6

mia soluzione utilizza un altro attributo jQuery sul footer div. L'aggiunta di data-fullscreen = "true" a quel div era tutto ciò di cui avevo bisogno. So che questa correzione potrebbe non essere disponibile fino a poco tempo fa, ma sto usando jqm 1.3.2 e jq 1.9. Ho pensato di pubblicare questa soluzione nel caso in cui aiuti qualcuno. In bocca al lupo. :)