We handling Landscape and portrait in iphone and android
window.onorientationchange = function() {
if(window.orientation == 0)
{
//Loading portrait content and hiding landscape content
}
else if(window.orientation == -90 || window.orientation == 90)
{
//Loading Landscape content and hiding portrait content
}
};
Problem is while rotating its taking time to Loading content
Can anyone help me out to fix this issue.
window.onorientationchange = function() {
if(window.orientation == 0)
{
//Loading portrait content and hiding landscape content
}
else if(window.orientation == -90 || window.orientation == 90)
{
//Loading Landscape content and hiding portrait content
}
};
Problem is while rotating its taking time to Loading content
Can anyone help me out to fix this issue.
- 15 Posts
- 0 Reply Likes
Posted 9 years ago
- 1911 Posts
- 199 Reply Likes
What's the issue - is it taking too long for the orientationchange event to fire, or is the code that executes in the if/else block (loading new content and hiding old content) taking too long?
- 7 Posts
- 0 Reply Likes
Andrew the issue is that on the rotation event, say from portrait to landscape, it rotates the portrait images first then loads the landscape images. In the opposite direction landscape to portrait is rotates the landscape images then loads the portrait images.
In a related issue, it loads all of the assets on the right then they "flash" to the center.
In a related issue, it loads all of the assets on the right then they "flash" to the center.
- 15 Posts
- 0 Reply Likes
Loading new content and hiding old content taking too long. So that it loads all of the assets on the right then they "flash" to the center.
- 1911 Posts
- 199 Reply Likes
Your best bet is probably to use the CSS orientation media query (or max-width when orientation is not supported), rather than manipulating the layout with JavaScript:
http://www.quirksmode.org/blog/archiv...
http://www.quirksmode.org/blog/archiv...
- 15 Posts
- 0 Reply Likes
We changing images as well page layouts while Orientation.
For ex:
window.onorientationchange = function() {
if(window.orientation == 0)
{
$(".portrait").css("display","block");
$(".landscape").css("display","none");
$("#MainDiv1 h2").css("margin-top","30px");
$(".dreamText").css("margin-top","30px");
$(".iphone .screen").css("background","url('css/image/bg.png') no-repeat scroll 0 0");
}
else if(window.orientation == -90 || window.orientation == 90)
{
$(".landscape").css("display","block");
$(".portrait").css("display","none");
$("#MainDiv1 h2").css("margin-top","10px");
$(".dreamText").css("margin-top","10px");
$(".iphone .screen").css("background","url('css/image/bg-land.jpg') no-repeat scroll 0 0");
}
};
This example shows changes in layout as well.
Some design changes to fit.
For ex:
window.onorientationchange = function() {
if(window.orientation == 0)
{
$(".portrait").css("display","block");
$(".landscape").css("display","none");
$("#MainDiv1 h2").css("margin-top","30px");
$(".dreamText").css("margin-top","30px");
$(".iphone .screen").css("background","url('css/image/bg.png') no-repeat scroll 0 0");
}
else if(window.orientation == -90 || window.orientation == 90)
{
$(".landscape").css("display","block");
$(".portrait").css("display","none");
$("#MainDiv1 h2").css("margin-top","10px");
$(".dreamText").css("margin-top","10px");
$(".iphone .screen").css("background","url('css/image/bg-land.jpg') no-repeat scroll 0 0");
}
};
This example shows changes in layout as well.
Some design changes to fit.
- 1911 Posts
- 199 Reply Likes
- 15 Posts
- 0 Reply Likes
Hi Andrew we Changing layouts in javascript while rotation. Is there possible to load content fastly in javascript
- 7 Posts
- 0 Reply Likes
Andrew the issue is that we are getting a full layout change to landscape, and Venky does not believe that he can use CSS media queries to do that.
And I do not believe that it is just a speed issue, because it is rotating the portrait layout first, then loading the landscape (and vise versa).
And I do not believe that it is just a speed issue, because it is rotating the portrait layout first, then loading the landscape (and vise versa).
- 1911 Posts
- 199 Reply Likes
If you want a different layouts for portrait and landscape, use CSS media queries. It is what they are designed for. They work well.
If you use JavaScript to do this, it will work less well.
If you use JavaScript to do this, it will work less well.
- 7 Posts
- 0 Reply Likes
Andrew, I think there are actually two issues here and not one.
I think the rotating portrait screen is because the device is doing it automatically when the device rotates. Then after detecting the rotation we are loading the new layout.
Is there a way for us to disable device rotation, but still be able to detect the actual rotation so we can load the new layout (either with CSS media queries or JS).
This doesn't necessarily address the speed issue on the layout loading, however it won't be visible as we can wait to hide the portrait until after the landscape has fully loaded in the background.
I think the rotating portrait screen is because the device is doing it automatically when the device rotates. Then after detecting the rotation we are loading the new layout.
Is there a way for us to disable device rotation, but still be able to detect the actual rotation so we can load the new layout (either with CSS media queries or JS).
This doesn't necessarily address the speed issue on the layout loading, however it won't be visible as we can wait to hide the portrait until after the landscape has fully loaded in the background.
- 2 Posts
- 0 Reply Likes
hey!
if i have to fix my application for landscape mode only then what to do?
m developing it for android.
at present i m doing:-
window.onorientationchange = function() {
if(window.orientation == 0)
{
$(".portrait").css("display","none");
$(".landscape").css("display","block");
alert("designed for landscape only");
}
else if(window.orientation == -90 || window.orientation == 90)
{
$(".landscape").css("display","block");
}
};
if i have to fix my application for landscape mode only then what to do?
m developing it for android.
at present i m doing:-
window.onorientationchange = function() {
if(window.orientation == 0)
{
$(".portrait").css("display","none");
$(".landscape").css("display","block");
alert("designed for landscape only");
}
else if(window.orientation == -90 || window.orientation == 90)
{
$(".landscape").css("display","block");
}
};
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers


