L'immagine nell'intestazione fissa mobile jquery si sovrappone al contenuto fino all'evento di ridimensionamento

Question

Ho un'immagine nell'intestazione fissa jquery mobile. Quando la pagina viene caricata in Google Chrome o Apple Safari, il contenuto dell'intestazione si sovrappone al div del contenuto sotto l'intestazione finché non ridimensiono la pagina. Firefox e IE funzionano bene.

Grazie!

Answer 1

Credo che il problema è che quando jQuery Mobile inizializza la pagina, l'immagine di intestazione non è stata caricata e l'intestazione è molto più piccolo in modo jQuery Mobile mette un'imbottitura sull'elemento .ui-page che è troppo piccolo una volta che i carichi di immagini. Una semplice soluzione per questo è di impostare manualmente la dimensione dell'immagine dell'intestazione in modo che riprenda lo spazio richiesto anche prima che la sua sorgente venga caricata.

Si potrebbe anche fare questo, anche se sembra abbastanza hacky a me, forzare un ridisegno attivando l'evento resize su document.ready o forse window.load:

$(window).on('load', function() { 
    $(this).trigger('resize'); 
}); 

ho incollato questo codice nella console, mentre sulla tua pagina e ha riposizionato l'elemento del titolo come previsto.

Answer 2

L'applicazione dei seguenti CSS è utile?

.ui-page { 
    padding-top: 91px !important; 
} 

noti che si dovrà perfezionare il selettore in quanto questo si applicherà a sovrapporre i popup neanche.

Answer 3

Ho avuto molti problemi con questo. Ciò ha funzionato fino a quando non ho voluto aggiungere un collegamento:

<div data-role="header"> 
    <img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1> 
</div> 

Annotare il tag h1 vuoto.

Ho finito per non utilizzare affatto un ruolo dati = "header", non riuscivo proprio a farlo funzionare con un collegamento. Ho usato invece una classe di barra degli strumenti. Come questo:

<div class="ui-bar ui-bar-a"> 
    <a href="/" data-role="none"> 
     <img border="0" src="images/logo.png" style="float: left; display:inline"> 
    </a> 
</div> 

Answer 4

Una soluzione basata su @Jasper risposta che ha lavorato per me era:

$(document).on('pageshow', "div[data-role='page']", function() { 
    $(window).trigger('resize'); 
}); 

Ha un miglioramento che si applicano a tutte le pagine mobili jquery

Answer 5

ho giocato con le soluzioni piuttosto buone di Jasper e Carlos487 e hanno trovato che questo è il più aggiornato nd modo affidabile per farlo (jQm 1.4.x):

1. se è causa di un'immagine senza dimensioni specificate che avrà bisogno di tempo per caricare e quindi possono causare l'intestazione per ingrandire, quindi specificare le dimensioni note (idealmente tramite CSS) dovrebbe farlo. Altrimenti dovrebbe esserci un modo per determinare se ha finito di caricare e quindi applicare l'idea della soluzione 3 di seguito.

2. se è è a causa di qualche (forse) sconosciuto evento intestazione resize (per esempioattraverso qualche immagine caricata più tardi o qualche altro contenuto restringimento l'intestazione e rendendolo verticale più grande), allora questo dovrebbe funzionare con una ragionevole grande valore abbastanza timeout così:

   $(':mobile-pagecontainer').on('pagecontainershow', function(e) { 
       // maybe value > 100 needed for your scenario/page load speed 
       setTimeout(function() { $(window).trigger('resize'); }, 100 /*ms*/); 
   } 
   

3. se si sa che cosa sta causando questo(come nel mio caso, dove sono a destra spostando il contenuto della pagina su schermi di grandi dimensioni tramite alcuni (sovrapposto) a sinistra del pannello di navigazione altrimenti nascosto/allineato), allora quanto segue potrebbe essere ancora meglio, beeing indipendente dal tempo effettivo della pagina deve caricare su qualche dispositivo o scenario (che potrebbe essere più lungo di quello predefinito d timeout sopra):

   // if its due to some animation like in my case 
   // otherwise try to find a similar way to determine when the resizing event has 
   // completed! 
   $('#someAnimated').animate('complete', function() { $(window).trigger('resize'); }); 
   

(non sono sicuro se la soluzione Jasper s utilizzando $(window).on('load', ... sarà corretto in tutti gli scenari di caricamento delle pagine jQm (con AJAX pagina di navigazione). Ecco perché preferirei l'approccio Carlos487 nel mio esempio.)

Answer 6

Nessuna delle soluzioni sopra ha funzionato per me. Ma ho scoperto che il mio problema sta negli eventi dopo la navigazione della pagina. Se il div contenuto è nascosto in questo periodo, che non venga posizionato sotto l'intestazione div, invece rimane al suo posto originale:

$(document).on("pageshow", "div[data-role='page']", function() 
{ 
    $("#pageContentDiv").hide(); 
    setTimeout(function() 
    { 
     $("#pageContentDiv").show(); 
    }, 0); 
}); 

EDIT: trovato una soluzione migliore; imposta intestazione div altezza e pagina div pad superiore allo stesso valore:

<div data-role="page" style="padding-top: 60px"> 
<div data-role="header" data-position="fixed" style="height: 60px"> 

Spero che questo aiuti.