//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
> >
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
