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?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michael DyerSenior Systems Support AnalystCommented:
can you try this:

<script language="JavaScript" type="text/javascript">
if (screen.height < screen.width){
    alert("Please use Portrait!");
}
</script>
0
brucegustPHP DeveloperAuthor Commented:
It doesn't work...

Can't figure out why...
0
GaryCommented:
Are you trying to get the document/browser size or the screen size?
You are currently getting the screen size - is this for mobile?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

brucegustPHP DeveloperAuthor Commented:
Yes.
0
GaryCommented:
Yes to what?
0
RobOwner (Aidellio)Commented:
Please show the code in context as there isn't anything semantically wrong with it.
0
brucegustPHP DeveloperAuthor Commented:
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.
0
RobOwner (Aidellio)Commented:
Looks to be the innerWidth / innerHeight you're after:

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

Open in new window

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

0
RobOwner (Aidellio)Commented:
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>
...
0
brucegustPHP DeveloperAuthor Commented:
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.
0
RobOwner (Aidellio)Commented:
Just add this CSS

.ui-loader {
  display: none;
}

it's a loading element for jquery mobile.  you can safely hide it.

(EDIT) - the better way is to use the $.mobile object

http://jsbin.com/ekewIyu/2/edit
$.mobile.loader.prototype.options.text = "";

$(window).on( 'orientationchange', function(e){
  CheckOrientation();
});
function CheckOrientation() {
  alert('Checking Orientation');
  if(window.innerWidth > window.innerHeight){
    alert("Please use Portrait!");
  }
}

$(document).on('pageload', function() {
  CheckOrientation(); // call when the page loads
});

$.mobile.loader.prototype.options.text = "";

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brucegustPHP DeveloperAuthor Commented:
Excellent!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.