Webkit JQuery Bloque móvil a Transición en línea No funciona

Question

Estoy intentando obtener un cambio de orientación para trabajar en los navegadores móviles. Cuando la orientación cambia, el div "wrapStat" se supone que cambia entre la visualización en línea y en bloque.

Este bloque de texto completo se reemplaza cada X segundos por una llamada ajax, por lo que poner un estilo en la clase wrapStat en sí no funcionará. Estoy cambiando la clase padre #CustomStats entre portraitCustomStats y landscapeCustomStats dependiendo de la orientación.

Esto funciona en Firefox (el cambio de tamaño del navegador cambiará el indicador de orientación) pero no funciona en ningún navegador webkit hasta que se active la llamada ajax.

¿Hay algún problema con webkit y el cambio dinámico de estilos de línea y bloque?

css:

.portraitCustomStats .StatsRow .wrapStat { 
    display: block !important; 
} 
.landscapeCustomStats .StatsRow .wrapStat { 
    display: inline !important; 
} 

javascript:

$(window).bind('orientationchange', function (anOrientationEvent) { 
    if ($(window).width() > 600) return; 
    $("#CustomStats").attr("class", anOrientationEvent.orientation.toLowerCase() + "CustomStats").trigger("updatelayout"); 
}); 

HTML:

<span id="CustomStats" class="portraitCustomStats"> 
    <tr class="StatsRow"> 
     <td class="description">Unique Visitors</td> 
     <td class="stat"> 
      <span class="UniqueVisitors"> 
      <strong> 
      <div class="wrapStat"> 
       <span class="pastStat">(1,318)</span> 
       <img src="../../Images/up_arr.gif" alt="increase"> 
       <span class="increasedStat">85.43%</span> 
      </div> 
      </span> 
     </td> 
    </tr> 
</span> 

Aquí está la jsFiddle del código en realidad no funciona ...

http://jsfiddle.net/Hupperware/43eK8/5/

vista móvil: http://jsfiddle.net/m/rat/

Esto funciona en Firefox (el texto se vuelve rojo en "paisaje" y azul en "retrato" sólo para que sepas que está funcionando). En FF se mostrará en línea y bloquear a medida que avanza entre una visión más amplia y una visión estrecha ...

en Webkit (Safari y Chrome) no lo hará ...

Answer 1

Creo que he encontrado la respuesta ...

original:

<tr class="StatsRow"> 
    <td class="description">Total Sales</td> 
    <td class="stat"> 
      <span class="TotalSalesRow"> 
       <strong>$59,549.16</strong> 
       <div class="wrapStat"> 
        <span class="pastStat">($59,799.66)</span> 
        <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease"> 
        <span class="decreasedStat">0.42%</span> 
       </div> 
      </span> 
     </td> 
</tr> 

Parece que tener un lapso de envolver un div provoca una acción indeseable en webkit cuando intenta cambiar el diseño de el div que contiene

Cambio: (etiqueta div debajo segundo td)

<tr class="StatsRow"> 
    <td class="description">Total Sales</td> 
    <td class="stat"> 
      <div class="TotalSalesRow"> 
       <strong>$59,549.16</strong> 
       <div class="wrapStat"> 
        <span class="pastStat">($59,799.66)</span> 
        <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease"> 
        <span class="decreasedStat">0.42%</span> 
       </div> 
      </div> 
     </td> 
</tr> 

Answer 2

Retire el !important de ambos, su clases de css.

Answer 3

No puedo decir sobre el manejo de webkit en el navegador. Lo que puedo decir es que el cambio de orientación se detecta de forma diferente en dispositivos y navegadores. Esto puede causar dolores de cabeza ... (example).

La última vez que me retiré el pelo porque Android siempre devolvía la orientación "incorrecta" (retrato en el paisaje, paisaje en el retrato), cuando iOS lo informó al revés.

Por eso JQM recommends de obligar a cambiar el tamaño de en lugar de orientationChange cuando se trabaja con la anchura/altura y orientationChange. El cambio de tamaño se disparará junto con cada cambio de orientación, por lo que es independiente de la implementación del evento en el navegador.

Así que mi primera sugerencia sería: ¿Se puede vincular para cambiar el tamaño en su lugar?

Si desea seguir con orientationChange, aquí es un script que estoy usando, que parece funcionar bien:

// trigger 
$(window).on('orientationchange', function(event){ 
     your_function(event); 
     }); 

// function handling orientation 
function your_function(event) { 
    ... 
    if (event) { 
     // portrait 
     if (window.orientation == 0 || window.orientation == 180){ 
       // portrait stuff 
     } 
     // landscape 
      else if (window.orientation == 90 || window.orientation == -90) { 
       // landscape stuff 
       } 
     // any other event that's passed into here, you could feed RESIZE 
     } else if ($window.width() < THRESHOLD WIDTH) { 
       // portrait stuff 
       } else if ($window.width() > THRESHHOLD WIDTH) { 
          // landscape stuff 
          } 
       } 

En este momento, lo único que estoy alimentando orientationChange en esta función y que parece funciona bienSi no sería, podría también cambiar a la activación de este cambio de tamaño y no pasar el evento de este modo:

$(window).on('resize', function(event){ 
    your_function("I'm no event"); 
    }); 

que terminará en el segundo controlador. Necesitaría un ancho de umbral (600px?) Aunque el diseño debería cambiar.

Espero que esto ayude.

Answer 4

Lo que no entiendo es el if ($(window).width() > 600) return; que no desea orientar los dispositivos de alta rez?

Puedo estar equivocado, pero ¿no termina esta función de gestión de eventos si paysage y la mayoría de las aplicaciones de Android y iPhone (> retina HVGA y Iphone)?

Answer 5

Hice algunas pruebas y no pude reproducir el problema. ¿Has probado probar la función de depuración móvil en jsfiddle?

He reunido el siguiente ejemplo simple.

HTML:

<body> 
    <div id="changeMe">Hello World</div> 
</body> 

CSS:

.portrait { 
    display: block !important; 
} 
.landscape { 
    display: inline !important; 
} 
#changeMe { 
    color: blue; 
} 

Javascript:

$(document).ready(function() { 

    $('body').on('orientationchange', function() { 
     console.log('updated orientation: ' + window.orientation); 

     if (window.orientation == 0) { 
      // portrait mode 
      $('#changeMe').removeClass('landscape').addClass('portrait').text('Portrait Mode'); 
     } else { 
      // landscape mode 
      $('#changeMe').removeClass('portrait').addClass('landscape').text('Landscape Mode'); 
     } 
    }); 

});​ 

Aquí hay un enlace a la jsFiddle de trabajo: http://jsfiddle.net/gizmovation/9ALTU/

Cuando se utiliza la función de depuración móvil (el pequeño ícono de wifi al lado del botón de ejecución), puede abrir la página en su iPhone mientras depura simultáneamente en su PC. Cuando hice esto, pude ver que el bloque y los estilos en línea se estaban alternando correctamente en el div #changeMe. Esto debería funcionar independientemente de si el contenido se cargó a través de ajax.

Espero que esto ayude y que pueda usar el depurador móvil para resolver su problema.

Answer 6

su html que pegó arriba está en mal estado. tienes una etiqueta fuerte no cerrada. probablemente no deberías tener una etiqueta fuerte, o si lo haces, ponla dentro de la div, no afuera. tienes en tr envuelto en un lapso. esto es muy sintácticamente incorrecto, no estoy sorprendido de que no rinda de manera confiable. un tramo está en línea por defecto, y luego pones un tr dentro de un elemento en línea. ¿cómo esperarías que esto rinda? si puede, intente eliminar completamente los tr y los td y solo use divs flotantes. si necesitas usar una tabla, construye la tabla correctamente. intenta simplificar el marcado. cuanto más complicado sea el marcado, más espacio para el error. Si tiene varios errores de marcado, diferentes navegadores pueden manejar el marcado deficiente de diferentes maneras. no hay ninguna razón para tener divs (bloque por defecto) dentro de strongs (en línea por defecto) dentro de tramos (en línea) dentro de td (bloque). Creo que si simplifica y limpia su marcado, el problema desaparecerá. buena suerte.