jQuery orientationchange event -- having problem

hi,

I’m having a problem with jQ Mobile’s orientationchange event…

how exactly do you test for what orientation the window is in?

I used to think it was

   if (window.orientation == 0) {      //    (for portrait)

but it’s not giving me expected result (and at any rate
window.orientation prints ‘undefined’ in console.log() stmt…(???)

so checked out documentation, and am also trying

    if (event.orientation === 'portrait') {.....}

but problem persists… what I need is to get the window height every time I change orientation (of course this changes when you change orientation, but this does not seem to register w/this orientationchange event…)
and other simple CSS changes on or-chg event, but nothing works, unless I reload the page after or-change…

code to illustrate problem:

    winHeight = $(window).height();
    console.log(winHeight);
    $(window).on('orientationchange',function(event) {
    
    if (window.orientation == 0) {    
        console.log(event.orientation);    //    prints as expected - 'portrait'
        console.log(window.orientation);    //    prints 'undefined' (????)
    
        console.log(winHeight);  // does not get adjusted on orient.-chg
        
        $('.photoImg').css('border','solid 1px green');    //    takes only if reload pg
        
    } else { //    if (window.orientation == 90) 
    
        console.log(event.orientation);    //    prints as expected - 'landscape'
        
        console.log(winHeight);// does not get adjusted on or-chg, i.e, 
           // if load portrait then switch to landscape this prints the same win height as for portrait (????)
           
        $('.photoImg').css('border','solid 1px green');    //    takes only if reload pg
           
     } 
    
    })

;

if I test orientation with event.orientation instead of window.orientation have same problem…

and the example from here

$(window).bind('orientationchange',function(){
    if(event.orientation == 'portrait'){
        alert('portrait');
    }
    else if(event.orientation == 'landscape') {
        alert('landscape');
    }
});

also isn’t working… (do not see any alerts at all when chg orientation…)

have been struggling with this for days… would appreciate some help…

thank you…

May I ask why you want to detect orientation? Is it for some CSS-related display issue?

I want to detect orientation for testing purposes…:wink:

what I need to change on orientation-change changes only if I reload the page after I chg orientation… I don’t think this is how orientation-chg event is supposed to work…

thank you…

have limited access to internet now… am usu. in a bit of a hurry now when am online…

I guess you need to detect orientation b/c well, if you’re setting up styles based on orientation you need to detect orientation, it seems to me…:wink:
(of course detection with console.log() stmts are for testing…:wink:

still struggling w/this… sometimes things work in iOS simulator, but not in Chrome devices test thingie… some CSS changes based on orientation always work, some never work… it’s kind of hard…

would very much appreciate examples of code for this that’s working properly…

and am still intrigued as to why

 console.log(window.orientation); 

prints undefined… after you have switched orientation with

$(window).on('orientationchange',function(event) {.....}

thank you…

and again, by “working” I mean it works w/o having to reload the page after having changed orientation…

thank you…

and again, by “working” I mean it works w/o having to reload the page after having changed orientation…

thank you…

PS: there’s a bug in these fora… when post get a “bad gateway (502) error” then hit ‘ok’ then can see my post (sometimes… sometimes have to reload to see it…)

hi Ryan,

thank you for your response… I don’t understand this question… you do need to detect orientation to determine CSS for portrait, landscape… I want the CSS to change on ortientation-change…

thank you…

PS: sorry… I already posted this response… I thought I was responding to my newer thread on this… oh brother… I have limited access to the internet now… am a bit rushed now when am online… thanks again…

This should help

As Ryan said earlier what effect do you need to cater for on an orientation change?

When you rotate your device from portrait to landscape you just get a wider screen display (and a shorter height) but generally you don’t need to do anything about this assuming you have built a responsive site as the site will adjust to fit automatically. You don’t need to detect anything but you could if you wish use media queries to supply different styles based on portrait or landscape.

If your display isn’t changing then it sounds like you haven’t set the viewport meta tag correctly or not using a responsive design.

yes I built a responsive site, but some changes don’t take place when you change orientation, only when you reload the page… actually my site is a photo site and when you nav from photo to photo it’s a new url every time (with a query string that contains no. of photo…) so it’s not a big deal, but I still would like changes to change as soon as orientation is changed… if possible…

I posted more details about my particular problem here,

it turns out that – in iOS simulator at least, all CSS changes work, except the one where I need window height to register… orientation-change does not register change in window height…

thank you…

I still see no reason for you to be detecting this with js but I still may be misunderstanding the problem without a real example to look at. :smile:

Media queries would still seem to be sufficient. I don’t see from your fiddle that you have set initial scale to 1 in the viewport meta tag. Without this tag ios will not detect the orientation change anyway.

The viewport width is set to device-width in portrait orientation and device-height in landscape orientation.

If you have an element that you want to fill the viewport when orientation changes then you don’t really need to do anything as long as you have the viewport meta tag and initial scale in place.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height:100%;
}
body {
	margin:0;
	padding:0
}

article {
	border:solid 2px magenta;
	min-height:100%;
	background:#f9f9f9;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#main {
	margin:30px auto 0;
	width:200px;
	height:200px;
	background:#eee;
	border:solid 2px green;
}
@media screen and (orientation:portrait) {
	#main {
	border:2px solid red
	}
}
</style>
</head>

<body>
<article>
		<div id="main"></div>
</article>
</body>
</html>

Perhaps you can explain where you think that you need some other behaviour here and that may shed light on the problem?

hi Paul…

here’s an example… https://jsfiddle.net/s8sh5rp2/ in which I show what works and what doesn’t… my site is responsive… but I find that media queries alone are no longer reliable… some phones are so big that in landscape they switch to the design for tablets, and some tablets are so small that in portrait they switch to the design for phones… (so, if I do want diff designs for phone & tablet I have to resort to detecting device (I have found a very handy PHP class to do this (http://mobiledetect.net).

re orientation, sometimes I need less bottom margin on an element at top of page, for example, when I switch to landscape (even if I set this btm margin in %ge value the same setting doesn’t work for portrait and landscape, and also for iPhone5 and iPhone6, for example… no matter what I do I need to make certain – albeit subtle – changes when change orientation… and often they don’t take until you reload the page…

the example above is a bare-bones to illustrate the problem… I’m working on a photo site… I will try to recreate at least the basics in a fiddle to show you what I’m talking about… (I don’t have a website right now… so don’t have my own server where I can post my stuff…)

I have this tag…

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">

not sure what the diff is exactly with the one you mention… but I guess I can look that up…

Paul, thank you for your help… I will certainly also play with the code you posted and check the URL’s you posted…

That fiddle is really of no use to me as it doesn’t tell me what you want to happen. I still believe you are doing this all wrong anyway :smile:

No you don’t need different designs for phones and tablets. Some tablets are bigger than laptops. The distinction is irrelevant. All you need concern yourself with is the available width that your design needs to be viewed on.

When you rotate a device the device is still the same height and width so detecting device width/height is of no use. You need to be concerned with either orientation (using media queries) but even orientation is not necessary if you simply use the layout width (not device width). In the end it is the width of the drawing area that you are concerned about irrespective of the device. The device always has the best resolution in mind so you really only have to cater for width in your media queries (not device width).

Don’t use the meta tag you posted but use the one that I posted instead as that is all you need unless you are building an app for a specific device.

Your js seems irrelevant as the example I posted does all that you want as far as I can see. If you want less margins when there is less height then just use media queries based on height and decrease the margin. percentage margins are always based on the width of the element so I would avoid using them.

If you would like to post an image that we can use in a demo and then post two screenshots of how you would like it to appear on portrait and landscape then we can set up a real demo and address any concerns you may have.

Js is not the way to approach this.:slight_smile:

1 Like

thank you for your response, Paul…

well, in that fiddle example the main thing that concerns me is that this line

winHeight = $(window).height();
winHeightAdj = winHeight-70;

$('article').css('height',winHeightAdj); //    doesn't work.. winHeight chg 
                                    //    does not register on orienttion chg

does not change when I change orientation… it only changes after I have reloaded the page (or loaded another photo, which is a diff url…) i.e., window-height change does not register on orientation change, only after the page reloads, or when I load a diff url…

that’s the main issue I’m concerned with right now…

as for the responsive design issue (tablet vs phone, etc…) I just don’t like it when the design changes completely in tablet from landscape to portrait… I think for consistency’s sake, the design should, to the extent possible, remain the same within every device, for portrait and landscape…

example: I have a page which consists of headers and content underneath, and in phone only, everything is hidden, except the headers, which are links, which show/hide the content under each link/header… now I want those headers to be links and the content underneath them to be hidden only for phones, not for tablets, regardless of dimensions of tablet screen… I don’t want the phone design/layout/org of the page to show up on tablets… just to cite an example… make sense? I don’t have a lot of time online right now, but will prepare a bare-bones fiddle example of this case I’m mentioning for next time I’m online…

again, Paul… thank you for your help and your patience…

I’ll need to see a demo as it still seems that the code I gave will achieve all this. Unless I’m missing the point (which often happens).

You mean you want it to only be 320px wide on a desktop ? :smile:

How do you know it’s a phone and how do you know how wide that phone is?

So now you want to discern tablets from phones. I’m not sure that I know where the line is drawn as some tablets are phones. Would you like to also sort desktops by manufacturer and by Apple or PC - you can see where I’m going with this :slight_smile:

You are trying to control things that really aren’t under your control and as I said all along you are better off catering for your design and changing the design at the widths that the design needs changing.

Detecting devices and orientation is a world of pain and unlikely to work well as devices are still the same height even when you turn them on their side hence your problems in ascertaining the height.

However, I will wait until you have a concrete example

ok… now I finally got this to work… of course your code example was perfect…:wink:

only thing, I had the following layout:

<body>
<header></header>
<article></article>
</body>

the header is about 46px high, so 100% for article didn’t quite work… so I had to put the header inside article… not too kosher, I know…:wink: so I just turned ‘article’ to div id=“wrapper” (would be good if HTML5 had a ‘wrapper’ tag.:wink: and ‘article’ wasn’t really necessary where I had it… (it’s a photo site… main element is a #photo div that contains img & caption (if any), plus a nav that I show/hide with a pretty standard “menu” cta used for mobile devices… and a few other elements…

Paul, once again, thank you so very much for your help…

PS: regarding the phone vs tablet issue: you really think it’s ok for the design to change radically when you change orientation on a tablet? from landscape to portrait and vice-versa? hm…:wink:
didn’t have time to put together a concrete example, unfortunately… will do for next time… but solved my main issue… again, thank you so much…

If you used the display:table properties you could set the table to 100% high and then have two css table-rows for your header and article. If you set the first table row to height:1px then the other row stretches all the way to the bottom. Tables always treat height as a minimum so the header will always expand to contain content. This is how my sticky footer works but in reverse.

Your design should just expand to fill the available space in the best way possible. Sometimes that means going from 3,2, or 1 columns (or vice versa) but the point at which you change depends on your design.

When I open my browser window I don’t necessarily want one great big long line of text. I’d rather the text moved into more readable structures like columns. This holds true for all sizes of device. Your design dictates the point at which a change is triggered but in-between sizes the design should flex automatically.

Try not to think of devices at all but just concentrate on how the design looks when you open and close the window.

I think it would depend on what is considered “radically” and on why someone changed orientation.

Arms tired? Cramped conditions? Or are they doing so because they expect the design to change somewhat?

I’m guessing in some cases it’s because the design “isn’t working for them” in a certain orientation. eg.

A wide image in portrait requires horizontal scroll so switch to landscape instead.
Wide lines of text in landscape are hard to follow so switch to portrait

Paul,
(and is answer to Mittineague too…)

as promised (better late than never…:wink: here are sreenshots of design (simplified) for one website I’m working on…

  1. design for tablet & desktop
  2. design for phone

and I’m also working on another website, a photo site, in which I organized the design differently: one design for phone & tablet, another for desktop (I’ve had this photo site for a long time and rather like the desktop design, which I created about 8 years ago) and didn’t want to give it up; so left it as is (with minor changes), and created a new design for phone & tablet)

and I have found the only way the designs don’t sometimes “spill over” to other devices for which they were not intended, is to load different style sheets for different devices (preserving a common style sheet for all, of course, for the styles that are common to all devices)

in fact I have documented in which devices the designs change from portrait to landscape and vice-versa…
there are phones that are so large that in landscape they switch to the design for tablets; and tablets that are so small that in portrait they load the design for phones (I think relying on CSS media queries alone is no longer enough, as there are some overlaps in dimensions from phones to tablets, and even desktops; some tablets are so large that in landscape they load the design for desktops…) so I created a list to show on which devices this happens (not sure you’re interested in the list of actual devices (so far have about six devices under each list), but you get my drift, right?)

tablets - in portrait looks like phone:

list devices

phones - in landscape looks like tablet:

list devices

Paul, again, thank you very much for all your help and your patience…

If I understand what you are saying then you are still missing the point a little and the fact that you mention these differences (overlaps) proves my argument again in that you should not be taking this approach because there are ‘overlaps’. You can’t say here lies a tablet and here lies a phone etc…

That’s perfect and exactly what you want to happen :smile:

If the design fits at that width then that’s the width it should be at.

You are the only one that thinks this then (unless you are doing device detection for a mobile only site). Javascript should not be used here for 99% of normal RWD websites.

If it doesn’t work for you the you are approaching it the wrong way or your design process is not thinking in the right way. It does not matter what the device is; what matters is what the page looks like at every width.

In some ways you have to throw your designs out of the window and use what works. There’s no point in drawing nice little boxes for mobile sites and then drawing something completely different for the desktop. You have to start with what’s feasible and possible and take it from there. Otherwise you end up building a different page for every device and I believe there are abut a 1000 of them now all width different viewports.

Forget portrait and landscape. They are just screens with different widths. Cater for widths not devices.

I’m not sure what you were showing in your images above but they look ok to me and quite feasible to code.

Whether a tablet gets the smaller display or the larger display will depend on the width of the tablet and the manufacturers of those tablets give then a resolution that works for that device so just by catering for width you get the nest fit n that device. Why would you want to give a 320px display to a big tablet?

In the end you can do (try) whatever you want but swimming upstream is harder than floating downstream :smile: Let go of control and just enjoy the freedom.