2011-06-08 10 views
8

He estado febrilmente guiando mi camino a través del tramo final de un sitio que estoy construyendo y me encuentro con un extraño capricho solo con Chrome. FF e IE parecen funcionar bien.En Chrome, la página no cambiará de tamaño después de la carga de Ajax

Estoy usando jQuery para cargar resguardos HTML y en este caso mucho contenido de un blog externo, pero cuando cambio de las páginas realmente largas a las realmente cortas obtengo una milla de página no utilizada aún añadida a el final del documento.

Esto es lo que el cuerpo de la página en los talones están siendo cargados en el siguiente aspecto:

<body> 
    <div id="page"> 
    <div id="mainWrapper"> 
     <div id="headerFullWidth"></div> 
     <div id="fixedwidthcontainer"> 
     <div id="header"> 
      <div id="logo"><img src="images/logo.png" height="85px" width="187px"></div> 
      <div id="shoppingcart"></div> 
      </div> 
      <div id="shoppingCartIcon"></div> 
     </div> 
     <div class="contentSpacer"></div> 
     <div id="contentwrapper"> 
      <div id="content"></div> 
     </div> 
     <div class="contentSpacer"></div> 
     <div id="footer"> 
      <div id="footerContent"> 
      <a href="#contactPopupContent" id="contactfooter">Contact Us</a><a href="#privacyPopupContent" id="privacyfooter">Privacy Policy</a><a href="#shippingPopupContent" id="shippingfooter">Shipping & Returns</a> 
      <div id="copyrightfooter">&copy; 2011 Victory Barbers and Brand</div> 
      </div> 
     </div> 
     <div id="fullWidthFooter"></div> 
     </div> 
    </div> 
    </div> 
</body> 

Todos mis cargas se realizan utilizando jQuery load() y yo hemos tenido una iteración del sitio que no lo hizo tener este problema Me he estado moviendo a un estilo de ancho más del 100% y este problema surgió en el proceso.

Mi pregunta es esta: ¿hay alguna manera de forzar a la página a volver a verificar su tamaño cuando se mueve a contenido diferente o más corto?

+6

'" Puedo publicar un enlace al sitio si es necesario ". '- hazlo. – thirtydot

+0

Tanta identificación y clase selectores ¿Realmente los necesitas a todos? – orustammanapov

Respuesta

1

Exactamente el mismo problema que encontré, y la respuesta que obtuve fue que no.

Solo pude arreglar esto comprobando la altura del nuevo div con el nuevo contenido después de cargar AJAX, y estableciendo la altura correcta con jQuery.

Sería muy bueno si alguien encontrara la manera de forzar el cambio de tamaño automático, pero mientras tanto esta solución funcionaba perfectamente, independientemente de la cantidad de contenido.

+0

Revisé las herramientas de desarrollador de Chrome y el div que cargué tiene el tamaño correcto. Si coloca el cursor sobre div, o el cuerpo o incluso el html, terminan en la parte inferior del contenido, mostrando toneladas de espacio vacío debajo de ellos. Llamar a jQuery ".resize()" en el div, el cuerpo o la ventana no ayuda. –

1

Pude arreglarlo en realidad solo con el CSS. el problema era que había colocado completamente mi elemento de envoltura de página, por lo que efectivamente se encontraba fuera del flujo de elementos del cuerpo. Eliminé la posición: absoluta; arriba: 0; izquierda: 0; y acaba de poner un borde: 0; y relleno: 0; en el elemento del cuerpo.

0

Debe ser un problema puro de CSS, no he usado jQuery para AJAX, pero cuando se llama al contenido, ¿usas esto?

document.getElementById('myDiv').innerHTML=myResult 

o estás usando jQuery

$('#myDiv').html(myResult); 

$('#myDiv').append(myResult); 

si utiliza jQuery usted debe limpiar el div en primer lugar, de esta manera:

$('#myDiv').html(''); 
$('#myDiv').html(myResult); 

Y si eso no le ayuda podía use una altura fija y use una propiedad css de desbordamiento

 #myDiv { 
     height:600px 
     overflow:auto; 
    } 

Por supuesto, una altura fija no siempre es la mejor solución, pero podría ayudarte.

0

Si viene el empujón, siempre puede forzar la altura después de la carga con algunos javascript.

Intento alejarme de position:absolute tanto como sea posible.

0

Puede utilizar css para resolver:

#myDiv{max-height:value; overflow:auto;} 
-2

asyncBoolean

por defecto: true

Por defecto, todas las peticiones se envían de forma asíncrona (es decir, este se establece en true por defecto) . Si necesita solicitudes sincrónicas, establezca esta opción en falso. Solicitudes entre dominios y tipo de datos: las solicitudes "jsonp" no son compatibles con la operación síncrona. Las peticiones síncronas pueden bloquear temporalmente el navegador, la desactivación de las acciones, mientras que la solicitud está activa."

+0

Comenzando con jQuery 1.8 las llamadas síncronas AJAX están en desuso, no las use, se eliminarán en el futuro. Dicho esto, no veo por qué usar una llamada síncrona ayudaría en absoluto a este problema. –

3

I piensan que he encontrado una solución a este. (Por lo menos no lo he visto en unos minutos). En la devolución de llamada .ajax, después de configurar el contenido con $('div').html(data);, cambio el tamaño de toda la ventana con $(window).resize();

Cuestiones relacionadas