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

Question

I am using this:

//if in landscape mode
while(window.orientation == 90 || window.orientation == -90) {
                    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!

Answer 1

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

Answer 2

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
    {
        ...
    }
}

Answer 3

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

Answer 4

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.