Geek asks and answers

Webkit JQuery Mobile unit for inline navigation Not working

I get attached to change the orientation for working with mobile browsers. When the orientation changes, the wrapStat div should change between inline and block display.

This full block of text is replaced for every X seconds by an ajax call, so setting the style to the wrapStat class will not work. I am changing the parent class C # CustomStats 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 an ajax call comes out.

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 not really working ...

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

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

Firefox ( "" "", , ). FF , ...

Webkit (Safari Chrome) ...

+5
6

, ...

:

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

, span div webkit div.

: ( div 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>
+2

. jsfiddle?

.

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

});​

jsfiddle: http://jsfiddle.net/gizmovation/9ALTU/

( wifi, ), iphone, . , , div #changeMe. , ajax.

, , .

+3

!important css.

0

webkit . , , changechange - . ... ().

, Android "" ( , ), iOS .

JQM orientationchange / . , .

, : ?

changechange, script, , :

// 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 passed into here, you could feed RESIZE
        } else if ( $window.width() < THRESHOLD WIDTH) {
                // portrait stuff
                } else if ($window.width() > THRESHHOLD WIDTH) {
                          // landscape stuff
                          }
               }

, orientchange , . , :

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

. (600 ), .

, .

0

, , if ($(window).width() > 600) return;, rez?

, , hanling , paysage most recnt android iphone ( > HVGA Iphone retina)?

0

html, , . . , , , , div, . tr, . , , . , tr . ? , tr td floated divs. , . . , . , -. divs ( ) ( ) (inline) td (block). , , . .

0
source

More articles:


All Articles