La imagen en el encabezado fijo de jquery se superpone al contenido hasta cambiar el tamaño del evento

Question

Tengo una imagen en mi encabezado fijo de jquery. Cuando la página se carga en Google Chrome o Apple Safari, el contenido del encabezado se superpone al div de contenido debajo del encabezado hasta que cambie el tamaño de la página. Firefox y IE funcionan bien.

Gracias!

Answer 1

Creo que el problema es que cuando jQuery Mobile inicializa la página, la imagen de cabecera no está cargado y la cabecera es mucho más pequeño para jQuery Mobile pone un relleno en el elemento .ui-page que es demasiado pequeño una vez que se carga la imagen. Una solución simple para esto es configurar manualmente el tamaño de la imagen del encabezado para que ocupe el espacio requerido incluso antes de que se cargue su fuente.

También podría hacer esto, aunque parece bastante hacky para mí, forzar un redibujo al desencadenar el evento resize en document.ready o tal vez window.load:

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

me pega este código en la consola, mientras que en su página y reubicó el elemento title como se esperaba.

Answer 2

¿Aplicar la siguiente ayuda de CSS?

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

Tenga en cuenta que tendrá que afinar el selector ya que esto se aplicará a superponer ventanas emergentes tampoco.

Answer 3

Tuve muchos problemas con esto. Esto funcionó hasta que quise agregar un enlace:

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

Tenga en cuenta la etiqueta h1 vacía.

Terminé sin utilizar un data-role = "header" en absoluto, simplemente no pude hacer que funcione con un enlace. Usé una clase de ui-bar en su lugar. De esta manera:

<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 solución basada en @Jasper respuesta que funcionó para mí fue:

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

Tiene una mejora que se aplica a todas las páginas móviles jquery

Answer 5

he jugado con las soluciones bastante buenas de Jasper y Carlos487 y encontraron que esta era la más actualizada nd manera confiable para hacerlo (1.4.x JQM):

1. si es debido a una imagen sin dimensiones especificadas que necesitarán algún tiempo para cargar y por lo tanto puede causar la cabecera para ampliar, luego especificando las dimensiones conocidas (idealmente a través de CSS) debería hacerlo. De lo contrario, debería haber una manera de determinar si se ha terminado de cargar y, por lo tanto, aplicar la idea de la solución 3 a continuación.

2. si es es debido a alguna (tal vez) caso de cambio de tamaño desconocido cabecera (por ejemplo,a través de alguna imagen cargada tarde o algún otro tipo de contenido reducción de la cabecera y por lo tanto lo que es verticalmente más grande), entonces esto debe trabajar con un valor suficiente tiempo de espera grande razonable:

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

3. si sabe qué está causando esto(como en mi caso, cuando cambio el contenido de la página en pantallas grandes a través de algún panel de navegación alineado a la izquierda (por lo demás oculto/superpuesto), entonces lo siguiente puede ser aún mejor, siendo independiente del tiempo real la página necesita cargar en algún dispositivo o escenario (que puede ser más largo que su predefinido) d tiempo de espera de más arriba):

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

(no estoy seguro de si la solución Jasper s utilizando $(window).on('load', ... será correcta en todos los escenarios página JQM de carga (con la página de navegación AJAX). Es por eso que preferiría el enfoque de Carlos487 en mi ejemplo.)

Answer 6

Ninguna de las soluciones anteriores funcionó para mí. Pero descubrí que mi problema radica en los eventos posteriores a la navegación de la página. Si el div contenido está oculto durante este tiempo, no quede posicionada bajo la cabecera div, en lugar se queda en su lugar original:

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

EDIT: encontrado una mejor solución; establecer encabezado div altura y página div superior relleno con el mismo valor:

Espero que esto ayude.