Question

I’m tying to get an orientation change to work on the mobile browsers. When the orientation changes the div “wrapStat” is supposed to change between inline and block display.

This complete block of text is replaced every X seconds by an ajax call so putting a style on the wrapStat class itself will not work. I’m changing the parent #CustomStats class between portraitCustomStats and landscapeCustomStats depending on the orientation.

This works in Firefox (resizing the browser will flip the orientation flag) but does not work in any webkit browser until the ajax call fires.

Is there a problem with webkit and dynamically changing inline and block styles?

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>

Here is the jsFiddle of the code actually not working…

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

Mobile view: http://jsfiddle.net/m/rat/

This works in Firefox (text turns red in “landscape” and blue in “portrait” just so you know it’s working). In FF it will show inline and block as you go between a wider view and a narrow view…

In Webkit (Safari and Chrome) it will not…

Answer 1

I believe I’ve found the answer…

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>

It appears that having a span wrap a div causes undesirable action in webkit when you try to change the layout on the containing div.

Change: (div tag below 2nd 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>