Orientation problem

  • 1
  • Question
  • Updated 9 years ago
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.
Photo of venkteshganesan05

venkteshganesan05

  • 15 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 1
Photo of Andrew Lunny

Andrew Lunny

  • 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?
Photo of Nilesh Wickham

Nilesh Wickham

  • 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.
Photo of venkteshganesan05

venkteshganesan05

  • 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.
Photo of Andrew Lunny

Andrew Lunny

  • 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...
Photo of venkteshganesan05

venkteshganesan05

  • 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.
Photo of Andrew Lunny

Andrew Lunny

  • 1911 Posts
  • 199 Reply Likes
Use CSS media queries, not JavaScript.
Photo of venkteshganesan05

venkteshganesan05

  • 15 Posts
  • 0 Reply Likes
Hi Andrew we Changing layouts in javascript while rotation. Is there possible to load content fastly in javascript
Photo of Nilesh Wickham

Nilesh Wickham

  • 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).
Photo of Andrew Lunny

Andrew Lunny

  • 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.
Photo of Nilesh Wickham

Nilesh Wickham

  • 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.
Photo of abhinav6019

abhinav6019

  • 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");
}
};