the problem with the alert, is when you flip back and forth you queue
up alerts,
a special background image on the html tag would not queue anything
On Nov 20, 2007, at 12:13 PM, riactant wrote:
>
> 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
-~----------~----~----~----~------~----~------~--~---
