if statement inside while loop. Why is it doing this?

I am using this:

//if in landscape mode
while(window.orientation == 90 || window.orientation == -90) {
           开发者_StackOverflow         if(!$('#page' + hiddenNextPage).hasClass('showUp')) {
                        $('#page' + hiddenNextPage).addClass('showUp');
                        $('#page' + hiddenNextPage).css('margin-left', '300px');
                    };
                }

//if in portrait mode
while(window.orientation == 0) {
                    if($('#page' + hiddenNextPage).hasClass('showUp')) {
                        $('#page' + hiddenNextPage).removeClass('showUp');
                        $('#page' + hiddenNextPage).css('margin-left', '5px');
                    };
                };

But its making my pages not even load anymore.. & it takes such a long time to load this. Is there anything wrong with it?

Is there a better way of constantly checking if the orientation has been changed without using a while loop?

This is for the ipad/iphone

Thanks!

I don't see that the bodies of your while loops are modifying the while tests. This produces an infinite loop.

Since you're only changing styles, you could use separate stylesheets for portrait and landscape...

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

EDIT

There's also an onorientationchange event on window which allows you to run code when the orientation changes rather than constantly polling for a change...

window.onorientationchange = function (event)
{
    if (window.orientation == 90 || window.orientation == -90)
    {
        ...
    }
    else
    {
        ...
    }
}

I don't think you should be using a while loop at all.

If you want to execute code periodically, use a timeout or interval.

Also, your jQuery is very inefficient - especially with how you re-run the selector so many times.

var $nextPage = $('#page' + hiddenNextPage );

window.setInterval( function()
{
  if ( 0 == window.orientation )
  {
    if ( $nextPage.hasClass( 'showUp' ) )
    {
      $nextPage
        .removeClass( 'showUp' )
        .css( 'margin-left', '5px' )
      ;
    }
  }
  else if ( !$nextPage.hasClass( 'showUp' ) )
  {
    $nextPage
      .addClass( 'showUp' )
      .css( 'margin-left', '300px' )
    ;
  }
}, 100 ); // 100 means this will execute every 100 milliseconds

I'd recommend seperate style sheets, but as far your question of constantly checking you can set a timeout with setInterval ( expression, interval );

example:

setInterval(function() {
   if ((window.orientation == 90 || window.orientation == -90) {
      if(!$('#page' + hiddenNextPage).hasClass('showUp')) {
         $('#page' + hiddenNextPage).addClass('showUp');
         $('#page' + hiddenNextPage).css('margin-left', '300px');
      }
   } else if (window.orientation == 0) {
      if($('#page' + hiddenNextPage).hasClass('showUp')) {
         $('#page' + hiddenNextPage).removeClass('showUp');
         $('#page' + hiddenNextPage).css('margin-left', '5px');
      }
   }
}
, 2000 );

edit Accidently used setTimeout instead of setInterval the first time, oops.