Tracking orientation without setInterval()

Sean Gilligan

unread,

May 27, 2008, 4:35:54 PM5/27/08

to iphone...@googlegroups.com

Using onload and onorientation handlers I can track the orientation
state of the page without needing to use setInterval(), except for (at
least) the following case:

1. Page is loaded in portrait mode
2. User follows a link to another page
3. User rotates the iPhone while viewing the other page
4. User uses the back button in Safari

When the page is redrawn, neither the onload or onorientation handlers
will fire.

Has anyone solved this problem without using setInterval to poll?

Thanks,

Sean

Chrilith

unread,

May 28, 2008, 4:06:09 AM5/28/08

to iPhoneWebDev

No, this seems to be more a limitation (bug?) of Safari

Peter Blazejewicz

unread,

May 29, 2008, 6:16:17 PM5/29/08

to iPhoneWebDev

hi guys,

except of Window event there is a window orientation property if my
memory serves me correctly, is there?

regards,
Peter

Chrilith

unread,

May 30, 2008, 4:18:33 AM5/30/08

to iPhoneWebDev

Could you be more specific?

On May 30, 12:16 am, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:

Jorge Chamorro

unread,

May 30, 2008, 5:46:57 AM5/30/08

to iphone...@googlegroups.com

I use both onorientationchange and onresize and it's working fine.

Just double-check the onresize events, because you are going to get
them as well when the content of the window grows in the Y axis.

--Jorge.

Peter Blazejewicz

unread,

May 30, 2008, 12:18:30 PM5/30/08

to iPhoneWebDev

hi,

"window.orientation" {0, 90, -90}
does it work in use cases raised in first post?

regards,
Peter

Sean Gilligan

unread,

May 30, 2008, 1:34:28 PM5/30/08

to iphone...@googlegroups.com

window.orientation always seems to have the correct value if polled. But I don't know of a reliable strategy for using event handlers to track the state of window.orientation.

I have created a test program and put it in the iui samples directory on Google Code:
http://iui.googlecode.com/svn/trunk/samples/orient.html

1) Load this page on your iPhone
2) Touch the "link out" link
3) Wait for the "Static" page to load
4) Change the orientation on your phone
4) Click the back button on your iPhone
5) Notice that three indicators of orientation read "unknown"
(The "Load Events" indicator should have original orientation listed)
6) Click the "Read window.orientation" javascript link
7) You'll notice that "Manual State" now correctly indicates orientation

The source for this page is really simple (based upon Apple's sample code)

So, does anyone have an idea for how to track all orientation changes without using setInterval()?

-- Sean

Sean Gilligan

unread,

May 30, 2008, 1:58:05 PM5/30/08

to iphone...@googlegroups.com

p.s. Occasionally, clicking "Read window.orientation" seems to trigger a resize event that otherwise would not have happened.

-- Sean

Jorge Chamorro

unread,

May 30, 2008, 6:36:39 PM5/30/08

to iphone...@googlegroups.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Orientation</title>

window.onload= window.onunload= window.onorientationchange= window.onresize= function ()

{

var w= window,

x= function (p) { return document.getElementById(p) };

x('target').innerHTML= w.orientation+", "+w.innerWidth+", "+w.innerHeight+'<br/>'+Date();

}

</script>

</head>

<body>

<h2>Tracking Orientation</h2>

State: <span id="target"></span><br/>

</body>

</html>

Obviously there's some bug because

1.- these events are not always being posted at the right time (remove window.onunload and you'll see what I mean)

and,

2.- w.innerWidth when in portrait sometimes becomes 240 (?),

But written in this way at least w.orientation seems to be reported correctly, all of the times.

--Jorge.

Sean Gilligan

unread,

Jun 2, 2008, 2:48:18 PM6/2/08

to iphone...@googlegroups.com

Thanks, Jorge!

I compared your working solution with my test page, line-by-line and found that by simply adding an onunload handler the load event is called properly in the problematic use case (returning to a previously loaded page, via the back button, after rotating the phone while viewing another page)

The unload handler can be an empty function, but simply by being registered it seems to correct the behavior of onload.

I'll check in the changes to samples/orient.html once Google Code finishes its maintenance.

Also, I did not see w.innerWidth with a value of 240 in portrait mode. Did that only happen when you removed window.onunload?

-- Sean

Jorge Chamorro

unread,

Jun 2, 2008, 4:28:03 PM6/2/08

to iphone...@googlegroups.com

El 02/06/2008, a las 20:48, Sean Gilligan escribió:

Thanks, Jorge!

You're welcome.

I compared your working solution with my test page, line-by-line and found that by simply adding an onunload handler the load event is called properly in the problematic use case (returning to a previously loaded page, via the back button, after rotating the phone while viewing another page)

The unload handler can be an empty function, but simply by being registered it seems to correct the behavior of onload.

But it's probably ok to point both to the same handler function ... ?

I'll check in the changes to samples/orient.html once Google Code finishes its maintenance.

Also, I did not see w.innerWidth with a value of 240 in portrait mode. Did that only happen when you removed window.onunload?

It happens both on the real iPhone and the simulator, (maybe less often on the simulator), with onunload "installed" : the exact code posted (below) :

Sometimes w.innerWidth is shown as 240 and the image on screen is bigger (the text is bigger as if it had been zoomed in), and sometimes even though w.innerWidth is shown as 320, the text is in fact zoomed in (to the same size as when w.innerWidth was 240).

Probably if youu watch the size of the text, not only w.innerWidth, you'll note it as well : @ 320 the text is smaller than @240.

--Jorge.

Reply all

Reply to author

Forward