MIME-Version: 1.0
Message-ID: <f12bbb57-0f93-4d91-b076-9d3eff8e2da5@b40g2000prf.googlegroups.com>
Date: Mon, 19 Nov 2007 22:07:34 -0800 (PST)
Received: by 10.90.72.10 with SMTP id u10mr292047aga.1195538854678; Mon, 19 
	Nov 2007 22:07:34 -0800 (PST)
In-Reply-To: <e9aa62150711061044p47477656v8bd52dda59b8e1df@mail.gmail.com>
X-IP: 74.93.105.249
References: <e9aa62150711060839w72ea4ec3j6fe7918217a84a73@mail.gmail.com> 
	<7515FB15-2D10-4841-A99E-6EC6C76830D5@mac.com> <e9aa62150711060910w64292e5fn9a08899c5525010f@mail.gmail.com> 
	<A19BB9C2-7C72-4ABC-9D85-70817B36A332@mac.com> <e9aa62150711061044p47477656v8bd52dda59b8e1df@mail.gmail.com>
User-Agent: G2/1.0
X-HTTP-UserAgent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.9) 
	Gecko/20071025 Firefox/2.0.0.9,gzip(gfe),gzip(gfe)
Subject: Re: Preventing landscape view
From: riactant <m...@riactant.com>
To: iPhoneWebDev <iphonewebdev@googlegroups.com>
Content-Type: text/plain; charset=ISO-8859-1
Content-Disposition: inline
Content-Transfer-Encoding: 7bit

Here's the approach I've used:
1. Detect orientation change
2. Make visible a screen layer (such as a layer with gray bg color,
50% alpha, and top-most z-order) to prevent interaction with your
application
3. Display an alert informing the user that the app is designed to
only work in Portrait mode
4. Upon orientation change back to Portrait mode, hide the screen
layer so user can interact again with app.

Here's my function:

	function orientationChanged(){
		document.getElementById("landscapeScreen").style.visibility =
"visible";
		if ( window.orientation == "90" || window.orientation == "-90" ){
			alert("This application is designed to only operate in Portrait
mode.\nPlease rotate your iPhone to Portait mode to continue using the
application.");
		}
		else
		{
		document.getElementById("landscapeScreen").style.visibility =
"hidden";
		}
	}

Mike Brophy
Seattle

On Nov 6, 10:44 am, "Steve Finkelstein" <s...@stevefink.net> wrote:
> Thanks august. :-)
>
> And yeah, I just found out myself that window.orientation is a
> read-only property. Try to cancel the Event during the capturing phase
> isn't workable either.
>
> Time to write additional CSS!
>
> - sf
>
> On 11/6/07, August Trometer <blue...@mac.com> wrote:
>
>
>
> > Good try, but I think window.orientation is something that the browser
> > sets, and you can't affect it with code.
>
> > What I was suggesting is something more like:
>
> > function orientationChanged() {
>
> >         if ( window.orientation == '90' || window.orientation == '-90' ||
> >                         window.orientation == '180' )
> >                 document.body.className = 'landscape';
> >         else
> >                 document.body.className = 'portrait';
> > }
>
> > Then, in your CSS, you can have different styles for elements in
> > portrait or landscape mode.
>
> > Depending on what, exactly, you're trying to do, though, Randy is
> > right: it's simpler just to use percents, i.e. 100%, etc. as width
> > parameters. This allows your page to display regardless of orientation.
>
> > Also keep in mind that it's quite possible (I'd say likely) that Apple
> > will release an "iPhone HD" with, say, a 240 pixels per inch display,
> > or the again-rumored table with who-knows- how-many-pixels. Anything
> > based on 320 pixels wide will need reworked. By using %s, you can keep
> > yourself from having several versions of the same site.
>
> > August
>
> > On Nov 6, 2007, at 12:10 PM, Steve Finkelstein wrote:
>
> > > Thanks August..
>
> > > I'm having a bit of difficulty panning the view back into portrait ..
> > > if any suggestions to the following code can be made it would be
> > > totally wonderful... I figured it would do the trick, but apparently
> > > not. :-)
>
> > > function orientationChanged() {
>
> > >       if ( window.orientation == '90' || window.orientation == '-90' ||
> > >                       window.orientation == '180' )
> > >                       /* flip back to portrait view. */
> > >                       window.orientation = 0;
> > >            alert(window.orientation);
> > > }
>
> > > - sf
>
> > > On 11/6/07, August Trometer <blue...@mac.com> wrote:
>
> > >> You can'tpreventlandscape mode, but you can detect it, then adjust
> > >> your page as necessary. iPhone 1.1.1 introduced the
> > >> "onorientiationchange" JavaScript event. You can use it like this:
>
> > >> <body onorientationchange="orientationChanged()">
>
> > >> Then in orientationChanged() look at the window.orientation property
> > >> to determine the orientation of the screen. You can then set CSS
> > >> properties accordingly.
>
> > >> As far as input boxes, if you use a form element name that uses 'zip'
> > >> in it, a numerical input box will be used. For example:
>
> > >> <input type="text" name="thisisnotazip" size="20" />
>
> > >> Good luck!
>
> > >> August
>
> > >> On Nov 6, 2007, at 11:39 AM, Steve Finkelstein wrote:
>
> > >>> Hi folks,
>
> > >>> I was curious if anyone had a code snippet topreventlandscape view
> > >>> from happening in an application? I currently haven't optimized my
> > >>> CSS
> > >>> to propagate if the phone gets tilted 90 degrees and would like to
> > >>>preventlandscape view from creeping up.
>
> > >>> Also, one other question, is it possible to force only a numerical
> > >>> keyboard to come up for certain input boxes?
>
> > >>> Thanks for the help. :-)
>