Menu
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...
537
I did some testing and wasn't able to reproduce the problem. Have you tried testing the mobile debugging feature on jsfiddle?
I put together the following simple example.
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');
}
});
});
Here is a link to the working jsfiddle: http://jsfiddle.net/gizmovation/9ALTU/
When you use the mobile debugging feature (the little wifi looking icon next to the run button), you can open the page on your iphone while simultaneously debugging on your PC. When I did this, I was able to see that the block and inline styles were toggling properly on the #changeMe div. This should work regardless of whether the content was loaded via ajax.
Hope this helps and that you are able to use the mobile debugger to resolve your issue.
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
