Event to detect orientation (landscape and portrait mode) for “samsung galaxy Android 2.3.5”

Question

I want to show different page design for landscape and portrait mode.

I want an event which fire every time when user change the mobile from "landscape to portrait" and "portrait to landscape" and page show different design for both the mode.

Also in my code each time show the landscape design it is not able to detect the portrait mode.Even when I am running the page in portrait mode.

For following mobile device:

Device : Samsung Galaxy ,

Os version: Android 2.3.5.

In this I am using:

Jquery mobile version: 1.1.0. ,

Jquery version: 1.7.1

My code is running well for "iphone,ipad and htc android mobile" but when I am test this in "Samsung Galaxy" then it is showing landscape page design for both the landscape and portrait mode.

My code is:

 $(document).ready(function () {
    $("#pagecontent.ui-content").css({ 'padding': '0px', 'margin': '0px' });
    checkClientTimeZone();

    position = $.event.special.orientationchange.orientation();
    pagecontentChanges();

    //        $(window).bind("orientationchange", pagecontentChanges);

});
$.event.special.orientationchange.orientation = get_orientation = function () {
    var elem = document.documentElement;
    //alert(elem && elem.clientWidth / elem.clientHeight < 1.1 ? "portrait" :       "landscape");
    return elem && elem.clientWidth / elem.clientHeight < 1.1 ? "portrait" : "landscape";
};
window.addEventListener("orientationchange", function () {
    setTimeout(function () {
        position = $.event.special.orientationchange.orientation();
        pagecontentChanges();
    }, 500);
}, false);
window.addEventListener("resize", function () {
    setTimeout(function () {
        position = $.event.special.orientationchange.orientation();
        pagecontentChanges();
    }, 500);
}, false);


function pagecontentChanges() {

    if (position == "portrait") {
        $("#headertext").css({ "text-align": "center", "margin-top": "-2.6em" });
        $("#login_content").removeClass("landscap_logincontent");
        $("#registerdiv").removeClass("landscap_divwhite");
        $("#tylenol").css({ "width": "100%", "float": "", "margin-right": "0px" });
        $("#button_div .ui-btn").css(" margin-top", ".5em");
        $("#loginbluelink").css("text-align", "center");
        $("#redromantext").css("text-align", "center");
        $('#registerdiv').css({ "float": "" });
        $("#registertext").css({ "margin-top": "0px" });
        $(".divwhite").css({ "width": "60%" });

        $("#loginheader").attr("src", "@img_css_scpt/test_mobile/images/logon_header.png");

    }
    if (position == "landscape") {
        $("#headertext").css({ "text-align": "left", "padding-left": "5%", "margin-top": "1em" });
        $("#login_content").addClass("landscap_logincontent");
        $("#registerdiv").addClass("landscap_divwhite");
        $("#tylenol").css({ "width": "55%", "float": "left", "margin-right": ".5em" });
        $("#button_div .ui-btn").css(" margin-top", "0px");
        $("#loginbluelink").css("text-align", "left");
        $("#redromantext").css("text-align", "left");
        $("#registertext").css({ "margin-top": "5px" });
        $(".divwhite").css({ "width": "71%" });

        $("#loginheader").attr("src", "@img_css_scpt/test_mobile/images/landscap_header_logon.png");
    }
}

Answer 1

Try giving the window.resize event handler a setTimeout :

$(window).bind("resize", function () {
    setTimeout(function () {
        position = $.event.special.orientationchange.orientation();
        pagecontentChanges();
    }, 500);
});

That's what I did for my own window.resize event handlers for my Droid X that runs Android 2.3.4.