5

I'm reposting someone else's question I found on Google groups, I'm having a similar problem:

I have an application that requires everything to be in Portrait, except for when it plays a video. On iOS, when video playback is passed to the Quicktime player, I want the video to be able to be played in Landscape mode. Currently the video only plays in Portrait, since it seems to inherit the portrait - only from the phonegap application. My solution may be to change the Phonegap.plist to Auto rotate, but then I'd want to be able to use javascript to catch for rotation changes and prevent them in every page of the app except for Video playback. Does this sound feasible? Is there another way to force Landscape orientation just for a specific page of the application? Thanks!

I tried the following with Auto rotate enabled, without success:

$(document).ready(function(){
  document.addEventListener('orientationchange', function(e) { e.preventDefault(); }, false);
});
Vincent
  • 16,086
  • 18
  • 67
  • 73
  • Can you be more specific about your context? Im seeing iPhone, JavaScript, Android, not really sure even what platform you're referring to. – citizen conn Jun 22 '11 at 17:32
  • I guess .. vincent is working with Phonegap lib where he's gonna code once and get the builds for IOS, Android etc (that Phonegap supports). – success_anil Jun 22 '11 at 17:44
  • success_anil is right. I'm planning to build for iPhone and Android. However, at this stage, just an iPhone only solution would be enough. I'm using HTML5, jQuery and jQtouch. – Vincent Jun 22 '11 at 17:54
  • You might have to write a custom plugin to present a UIViewController that allows orientation changes. I don't know what the process would be for Android. – peterp Jun 22 '11 at 17:59
  • Can you link to the original Google Groups question? That will help us monitor it in case it gets answered there. Thanks. – Bill the Lizard Aug 02 '11 at 14:50
  • I just discussed it in another thread: http://stackoverflow.com/questions/7009743/jquery-mobile-lock-orientation/7010010#7010010 – Andreas Louv Aug 10 '11 at 13:30

1 Answers1

2
$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

This is a risky way but thinks its the only way..

Alternative you can bind to the window resize event. 

$(window).bind("resize", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

I wrote this little script a while ago: It fix the multiply resize callback bug in iOS safari and the non-/late-/early-trigger(1) orientationchange bug in android.

(1) Sometimes it dosn't trigger sometimes before and some times after the browser has changes width + height? Wired!

if (!(/iphone|ipad/gi).test(navigator.appVersion)) {
    $(window).unbind("resize").bind("resize", function() {
        $(window).trigger("orientationchange");
    });
}

If not iphone or ipad you are triggering the orientationchange event on the window.

So when you will bind any function the the resize you do it throw orientationchange.

See: http://jsfiddle.net/aalouv/sABRQ/1/

Andreas Louv
  • 46,145
  • 13
  • 104
  • 123
  • How do you incorporate this into your file? Does this just go in the JS portion of my index file? Let me know, thanks! – nate8684 Jul 11 '12 at 13:51