Webkit JQuery Mobile Block zu Inline-Übergang funktioniert nicht

Question

Ich bin verpflichtet, eine Orientierungsänderung zu den mobilen Browsern zu arbeiten. Wenn sich die Ausrichtung ändert, sollte sich der div "wrapStat" zwischen Inline- und Blockanzeige ändern.

Dieser komplette Textblock wird alle X Sekunden durch einen Ajax-Aufruf ersetzt, so dass das Setzen eines Stils auf die wrapStat-Klasse nicht funktioniert. Ich ändere die Parent # CustomStats-Klasse zwischen PortraitCustomStats und LandscapeCustomStats abhängig von der Ausrichtung.

Dies funktioniert in Firefox (die Größe des Browsers ändert das Orientierungsflag) funktioniert aber nicht in einem Webkit-Browser, bis der Ajax-Aufruf ausgelöst wird.

Gibt es ein Problem mit dem Webkit und dem dynamischen Ändern von Inline- und Blockstilen?

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> 

Hier wird die jsFiddle des Codes tatsächlich nicht funktioniert ...

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

Mobilansicht: http://jsfiddle.net/m/rat/

Dies funktioniert in Firefox (Text wird rot in "Landschaft" und blau in "Portrait" nur damit Sie wissen, dass es funktioniert). In FF wird es inline zeigen und blockieren, wie Sie zwischen einer größeren Ansicht und einer engen Sicht gehen ...

in Webkit (Safari und Chrome) wird es nicht ...

Answer 1

Ich glaube, ich die Antwort gefunden habe ...

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> 

Es scheint, dass eine Spanne ein div verursacht unerwünschte Wirkung in webkit wickeln haben, wenn Sie versuchen, das Layout auf ändern das enthaltende div.

Änderung: (div-Tag unter 2. 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

Versuchen Sie, die !important von Entfernen sowohl von Ihrer CSS-Klassen.

Answer 3

Ich kann nicht über Webkit Handhabung im Browser sagen. Was ich sagen kann, ist, dass die Orientierungsänderung über Geräte und Browser hinweg unterschiedlich erkannt wird. Dies kann Kopfschmerzen verursachen ... (example).

Das letzte Mal zog ich mir die Haare aus, weil Android immer die "falsche" Ausrichtung (Porträt im Querformat, Querformat im Hochformat) zurückgab, als iOS es umgekehrt berichtete.

, deshalb, JQM recommends zu die Größe statt orientationChange zu binden, wenn sie mit Breite/Höhe und orientationChange arbeiten. Resize wird zusammen mit jeder Orientierungsänderung ausgelöst, sodass Sie unabhängig von der Browser-Implementierung des Ereignisses sind.

Also mein erster Vorschlag wäre: Können Sie stattdessen an die Größenänderung binden?

Wenn Sie mit orientationChange haften möchten, hier ist ein Skript, das ich bin mit, was in Ordnung scheint zu funktionieren:

// 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 
          } 
       } 

Gerade jetzt, ich bin nur orientationChange in dieser Funktion Fütterung und es scheint arbeite ok.Wenn es nicht, ich auch zur Auslösung dieses auf Resize und nicht das Bestehen die Veranstaltung wie so ändern könnte:

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

, die in dem zweiten Handler am Ende wird. Sie würden eine Schwellwertbreite (600px?) Benötigen, bei der sich das Layout ändern sollte.

Hoffe, das hilft.

Answer 4

Was ich nicht bekomme, ist die if ($(window).width() > 600) return; Sie nicht auf High-Rez-Geräte zielen wollen?

Ich mag falsch sein, aber endet es nicht dieses Ereignis hanling Funktion, wenn Paysage und die meisten Recnt Android und iPhone (> HVGA und Iphone Retina)?

Answer 5

Ich habe einige Tests durchgeführt und konnte das Problem nicht reproduzieren. Haben Sie versucht, die mobile Debugging-Funktion von jsfiddle zu testen?

Ich fasste das folgende einfache Beispiel zusammen.

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

});​ 

Hier ist ein Link auf die Arbeits jsfiddle: http://jsfiddle.net/gizmovation/9ALTU/

Wenn Sie die Verwendung mobile Debugging-Funktion (das kleine WLAN-Symbol neben der Schaltfläche "Ausführen"), können Sie die Seite auf Ihrem iPhone öffnen, während gleichzeitig Debugging auf Ihrem PC. Als ich das tat, konnte ich sehen, dass die Block- und Inline-Styles im #changeMe div richtig umgeschaltet wurden. Dies sollte unabhängig davon funktionieren, ob der Inhalt über Ajax geladen wurde.

Ich hoffe, dies hilft und Sie können den mobilen Debugger verwenden, um Ihr Problem zu lösen.

Answer 6

Ihr HTML-Code, den Sie oben eingefügt haben, ist durcheinander. Sie haben ein nicht geschlossenes, starkes Tag. du solltest wahrscheinlich kein starkes tag haben oder wenn du es tust, lege es in das div, nicht draußen. du hast dich in eine Spannweite gehüllt. das ist sehr syntaktisch falsch, ich bin überhaupt nicht überrascht, dass es nicht zuverlässig ist. Ein Bereich ist standardmäßig inline, und Sie fügen dann einen tr innerhalb eines Inline-Elements ein. Wie würdest du das erwarten? Wenn du kannst, versuche, die trs und tds vollständig zu entfernen und verwende stattdessen floated divs. Wenn Sie unbedingt eine Tabelle verwenden müssen, dann erstellen Sie die Tabelle korrekt. Versuchen Sie, das Markup zu vereinfachen. Je komplizierter das Markup ist, desto mehr Platz für Fehler. Wenn Sie mehrere Markup-Fehler haben, können verschiedene Browser die schlechte Markup auf verschiedene Arten behandeln. Es gibt keinen Grund, divs innerhalb von strons (standardmäßig inline) innerhalb von spans (inline) innerhalb von tds (block) zu haben. Ich denke, wenn Sie Ihr Markup vereinfachen und bereinigen, wird das Problem verschwinden. Viel Glück.