Link to home
Start Free TrialLog in
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?
Avatar of Michael Dyer
Michael Dyer
Flag of United States of America image

can you try this:

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

ASKER

It doesn't work...

Can't figure out why...
Are you trying to get the document/browser size or the screen size?
You are currently getting the screen size - is this for mobile?
Yes.
Yes to what?
Please show the code in context as there isn't anything semantically wrong with it.
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.
Looks to be the innerWidth / innerHeight you're after:

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

Open in new window

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.
Then tagit is right with innerWidth...
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/
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.
$(window).bind( 'orientationchange', function(e){
  if(window.innerWidth > window.innerHeight){
    alert("Please use Portrait!");
}
});
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
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!
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

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>
...
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.
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Excellent!