enhance javascript code for screen orientation

Question

Having tried a load of different options found on SO, including jQuery mobile solutions (caused masses of conflicts with other jQuery) i found the following code would detect screen rotation and i could use it to add a class.

$(window).bind("resize", function(){
screenOrientation = ($(window).height() > $(window).width())? 90 : 0;
$('.centerBoxContentsSubCat').addClass('mobile_landscape');
});

However, I need to .removeClass when rotated the other way.

I tried duplicating the code, switching the positions of height and width, but this didn't work. I tried changing the code to

$(window).bind("resize", function(){
if(screenOrientation = ($(window).height() > $(window).width())? 90 : 0){
$('.centerBoxContentsSubCat').addClass('mobile_landscape');
}else{
$('.centerBoxContentsSubCat').removeClass('mobile_landscape');
}
});

but that didn't work either.

I am actually using @media queries for css, but i need to force a change in a column count on screen rotate and all other attempts have failed to get even close.

Any suggestions on where I'm going wrong here?

score 2 · Answer 1 · answered Oct 07 '15 at 00:26

There are two different ways you can handle this.

The first is with the event orientation change.

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    alert(window.orientation);
}, false);

The second is with matchMedia.

// Find matches
var mql = window.matchMedia("(orientation: portrait)");

// If there are matches, we're in portrait
if(mql.matches) {  
    // Portrait orientation
} else {  
    // Landscape orientation
}

// Add a media query change listener
mql.addListener(function(m) {
    if(m.matches) {
        // Changed to portrait
    }
    else {
        // Changed to landscape
    }
});

Source: http://davidwalsh.name/orientation-change

If you need to support older browsers I recommend this library:

https://github.com/WickyNilliams/enquire.js/

Whilst your answer is valid, it does have a shortcoming, which is why I looked for something else. Where you show a comment of Portrait I added $('.centerBoxContentsSubCat').removeClass('mobile_landscape'); , and where it shows a landscape comment I added $('.centerBoxContentsSubCat').addClass('mobile_landscape'); The problem i found was that if the page was loaded with the device already in landscape view it did not add the class. Switching to portrait and back would trigger the addClass. — Steve Price, Oct 07 '15 at 00:46
Try it with the media queries. I've done something here that might work: https://github.com/michaelBenin/node-startup/blob/develop/browser/js/mixins/device_manager.js — Michael Benin, Oct 07 '15 at 00:53

score 0 · Answer 2 · answered Oct 07 '15 at 00:25

0

You need to use the orientationchange event, not resize.

answered Oct 07 '15 at 00:25

bitfiddler

2,095
1
12
11

I tried countless examples of this from StackOverflow and other sites and could not get it to switch correctly. This is one such example I tried, and also points out some short comings with orientationchange. http://stackoverflow.com/questions/14019939/window-orientation-returns-different-values-in-ios-and-android Given that it is a basic feature of all smartphones, the fact it is so complicated to get a workable solution cross platform is ridiculous. – Steve Price Oct 07 '15 at 00:47

enhance javascript code for screen orientation

2 Answers2