Avatar of Bruce Gust
Bruce GustFlag for United States of America asked on

Why doesn't this code work?

This works:

<script language="JavaScript" type="text/javascript">
if (screen.height > screen.width){
    alert("Please use Landscape!");
}
</script>

Open in new window


...but this doesn't:

<script language="JavaScript" type="text/javascript">
if (screen.width > screen.height){
    alert("Please use Portrait!");
}
</script>

Open in new window

Why? What can I / should I do different?
JavaScript

Avatar of undefined
Last Comment
Bruce Gust

8/22/2022 - Mon
Michael Dyer

can you try this:

<script language="JavaScript" type="text/javascript">
if (screen.height < screen.width){
    alert("Please use Portrait!");
}
</script>
ASKER
Bruce Gust

It doesn't work...

Can't figure out why...
Gary

Are you trying to get the document/browser size or the screen size?
You are currently getting the screen size - is this for mobile?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER
Bruce Gust

Yes.
Gary

Yes to what?
Rob

Please show the code in context as there isn't anything semantically wrong with it.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Bruce Gust

Sorry, Gary!

It's for a mobile device. I want to encourage my user to remain in portrait mode versus landscape. I'm displaying a graphic which becomes difficult to appreciate when the user rotates their device to landscape.

I saw this script online and it worked, but in reverse. In other words, it was giving me the warning when I was in portrait mode as opposed to the other way around.

The browser's screen size is what I'm after. I just want to know when they turn their device, regardless of its size, to a landscape position. At that point, I want the alert to come up.
Rob

Looks to be the innerWidth / innerHeight you're after:

if(window.innerWidth > window.innerHeight){
    alert("Please use Portrait!");
}

Open in new window

Rob

You can also capture the event when the user does rotate as described here http://davidwalsh.name/orientation-change

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

Open in new window

During these changes, the window.orientation property may change. A value of 0 means portrait view, -90 means a the device is landscape rotated to the right, and 90 means the device is landscape rotated to the left.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Gary

Then tagit is right with innerWidth...
Rob

Not sure if you're using jQuery mobile but it's even easier and I suspect more robust across mobile devices, given that it says it detects screen resize when the orientationchange event isn't supported by the device.

http://jquerymobile.com/demos/1.0a2/#docs/api/events.html


Orientation change event

orientationchange
Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an orientation property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported.

(EDIT) Example use here: http://api.jquerymobile.com/orientationchange/
ASKER
Bruce Gust

tagit, this script works great...

if(window.innerWidth > window.innerHeight){
    alert("Please use Portrait!");
}

And I like it because it only fires when the device is rotated into a landscape dynamic.

The problem I'm having is that it only happens if I turn the device and then refresh the screen. Am I missing something? I was hoping it would fire without having to start in Landscape mode and then refreshing the screen.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rob

$(window).bind( 'orientationchange', function(e){
  if(window.innerWidth > window.innerHeight){
    alert("Please use Portrait!");
}
});
Rob

You have to wrap the code in the orientation change event. You can also trigger the event when the page is first loaded to detect if the orientation is correct from the beginning
ASKER
Bruce Gust

tagit, I think I'm correctly applying your suggestions, but I'm still falling short. Head out to http://brucegust.com/21 to see what I'm doing. This is for a mobile device, but check it out on your desktop as well so you can view the source code.

thanks!
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Rob

Looks like you just need to add jquery mobile to your site..

in the <head>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

also you were missing a few things with the javascript:

$(window).on( 'orientationchange', function(e){
    CheckOrientation();
});
function CheckOrientation() {
  if(window.innerWidth > window.innerHeight){
    alert("Please use Portrait!");
  }
}
$(document).on('pageload', function() {
CheckOrientation(); // call when the page loads
});

Open in new window

Rob

Here is a link to a working demo with your code:  http://jsbin.com/ekewIyu/1/edit

You also need the jquery base library included in your <head> before the jquery-mobile library, like this:

<head>
....
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
...
ASKER
Bruce Gust

tagit!

We are poised on the threshold of great things!

The script works perfectly, but I've got a large piece of text at the bottom of my screen that says "loading...".

What is that and how do I get rid of it.

BTW: When I remove the elements you suggested from my header along with the script, the "loading" thing went away. That said, there must be something about the way that I'm implementing your wisdom that's flawed.

Can you help a brother out...?

Thanks, friend!

Go to http://www.brucegust.com/30 to see what I'm doing.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Rob

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Bruce Gust

Excellent!