Phonegap - Prevent Rotation While Still Having Auto-Orientation Enabled?

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);
});

Answers


$(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/


Need Your Help

Programming with Alice, not working with Arch Linux

java linux alice

I'm having trouble running Alice 2.0 on Arch. I figure I'd ask here because of the number of programmers here who may have experience with either Java or Alice on Linux. When I was running Ubuntu b...

AS3: Type Coercion failed: cannot convert flash.events to flash.events.MouseEvent

actionscript-3 events coercion

When I placed this AddEventListener I got this "Type Coercion failed message"

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.