Orientation change event implementation by jquery mobile in phone gap

Question

Could someone please let me know the right code for orientation change event by jquery mobile in phone gap? Where and how do I implement this orientationChange function?

Answer 1

The following code should work across all the browsers to detect orientation change. It doesnt uses jquery mobile event but seems to work for most of devices.

1. var isIOS = /safari/g.test(navigator.userAgent.toLowerCase());
2. var ev = isIOS ? 'orientationchange' : 'resize'; 
3. var diff = (window.innerWidth-window.innerHeight);
4. $(window).bind(ev,function(){
5.     setTimeout(function(){
6.         if(diff*((window.innerWidth-window.innerHeight)) < 0)
7.             orientationChanged();
8.     },500);
9. });

Line 2 takes up the resize event for any non-safari browsers since other browsers in other devices take up resize event more consistently than orientation change event. http://www.quirksmode.org/m/table.html

Line 5 performs the check in a timeout since some of the android native browser dont take up the new width immediately.

Line 6 For the orientation change to take place the product of the differences of old and new height and width should be negative.