jQuery Forum

Hi,
I recently posted on the orientationchange event and problems particular with the Iphone. Then I was still using JQ 1.6.1 and JQM 1.0a4.

I could not get the "orientationchange" event to function on the Iphone. It did in DW 5.5 Live view, In the Device Central emulators and for the Android Emulators.

My question was responded by a user suggesting to bind the event like this:

  $(window).bind('orientationchange resize', function(event){

Note the "resize" after "orientationchange.

Now the orientationchange worked in the Iphone, DW CS5.5 and Device central. I was still sceptical because I could not find "orientationchange resize" in documentation anywhere.

A day later I upgraded JQ to 1.6.2 and JQM to 1.0b1 and the "orientationchange resize" stopped working. Not completely, it did come back intermittently in DW CS 5.5 but not in the Iphone.

I decided to take a look at the ".trigger()" method to "manually" fire the "orientationchange" event using the ".resize" method on the "window" object as precursor. It looks like this:

//JQuery INITS
$(document).ready(function() {
   ...
    $(window).resize( function(event) {
        $(window).trigger('orientationchange');
    });
  ...
});
// JQuery Mobile INITS
$(document).bind("mobileinit", function(){
 ...
      $(window).bind('orientationchange', function(event) {
        if (event.orientation == 'landscape' ) {
          // DO LANDSCAPE DEPENDENT STUFF HERE
         } else {
         // DO PORTRAIT DEPENDENT STUFF HERE
        }
      });
 ...
})

It does work in all contexts tested sofar. I am still uncertain if this is a correct/good approach and interested if there are better ways.

I am using other methods to cope with repositioning of elements in the two orientational modes of a mobile device for instance the JQM classes ".min-width-480px" but some elements that are supposed to be visible only in one orientational mode needs the event for JQ manipulation (sizes, visibility etc).

Just want to mention that the code above is focussed on the mobile app only. I do not consider a @media query style design taking care of (all) PC and tablet aspects.

Regards
/Ralf