The following code is supposed to make a map on a web page be the only element that is displayed on the page when the phone is turned sideways, and then re-adds the other elements when the phone is turned back to it's original portrait orientation. This works in Chrome for Android but does not work in FireFox v39 for Android.
The first alert fires in FireFox, so I know that device orientation is supported, but the second alert never fires in FireFox, so there is something wrong with my second conditional.
Code: Select all
if (window.DeviceOrientationEvent) {
alert("supported");
window.addEventListener('deviceorientation', function (eventData) {
if (window.orientation == 90 || window.orientation == -90) {
alert("90 or -90");
$("#mapTop").css("display", "none");
$("#mapBottom").css("display", "none");
}
else {
$("#mapTop").css("display", "block");
$("#mapBottom").css("display", "block");
}
});
}
Thank You Very much!