Just hiding the page when in landscape orientation, without alerting
the user as to why, will generate calls to the help desk (if one is
running a supported business or consumer app).
Nice code, I'd just add an alert() when making the user's screen go
blank.
On Nov 19, 11:12 pm, Jake Wolpert <[EMAIL PROTECTED]> wrote:
> //shorter and less obtrusive, just hides the page when page in
> landscape mode
> window.onload = window.onorientationchange = function(){
> setTimeout(scrollTo, 0, 0, 1);
> document.body.style.display = ( window.orientation == 90 ||
> window.orientation == -90 ) ?'none':'block';
>
> }
>
> On Nov 19, 2007, at 10:07 PM, riactant wrote:
>
>
>
>
>
> > 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" <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> 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. :-)
>
> >>>>>> - sf- Hide quoted text -
>
> - Show quoted text -
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en
-~----------~----~----~----~------~----~------~--~---
