Preventing landscape view
Steve Finkelstein
I was curious if anyone had a code snippet to prevent landscape 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
prevent landscape 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
August Trometer
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
Randy Walker
way, it would work in portrait or landscape. At least try that for
backgrounds/main containers etc. Allowing them to span 100%, keeping
your main elements centered at the 320 width.
Numerical kybd = how the field is named.
-=Randy
On Nov 6, 2007, at 8:39 AM, "Steve Finkelstein" <s...@stevefink.net>
wrote:
Steve Finkelstein
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
August Trometer
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
Steve Finkelstein
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!
riactant
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
>
>
> > >> You can'tpreventlandscape mode, but you can detect it, then adjust
> > >> "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,
>
> > >>> CSS
> > >>> to propagate if the phone gets tilted 90 degrees and would like to
Jake Wolpert
landscape mode
window.onload = window.onorientationchange = function(){
setTimeout(scrollTo, 0, 0, 1);
document.body.style.display = ( window.orientation == 90 ||
window.orientation == -90 ) ?'none':'block';
riactant
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.
>
> - Show quoted text -
Jake Wolpert
up alerts,
a special background image on the html tag would not queue anything
RobG
On Nov 21, 6:26 am, Jake Wolpert <jakeci...@gmail.com> wrote:
> 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
whether to use the page in landscape or portrait. Any attempt to
force the user to use a particular orientation is a very unfriendly
thing to do. :-(
If Apple thought forcing an orientation was a good idea, they wouldn't
have made the orientation property read-only.
--
Rob
Randy Walker
Even so, I agree letting the user decide is probably the most friendly
thing. Personally, I don't like most sites in landscape.
-=Randy
AwayBBL
http://www.myhip.com/yule.html
If it works correctly, when you tilt to another orientation, it should
show a different image.
the code is this... borrowed some of the comments from above...if you
see any erros, please let me know
(I'm currently without device so I can't see if it works)
<head>
<meta name="viewport" content="width=320; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;"/>
<script type="application/x-javascript">
addEventListener("load", function()
{
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar()
{
window.scrollTo(0, 1);
}
</script>
<script type="application/x-javascript">
{
setTimeout(scrollTo, 0, 0, 1);
{
src=yule.gif>";
}
else
{
document.getElementById('main').innerHTML = "<img
src=wreath.gif><br>Tilt for Yule Log";
}
}
</script>
</head>
<body style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM:
0px; MARGIN: 0px auto; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff"
border=0 bgcolor="#FFFFFF" text="#808080">
<table align=center width=100% height=100% cellpadding=0 cellspacing=0
bgcolor=black>
<tr align=center>
<td align=center><div id="main"><img src="wreath.gif"><br>Tilt for
Yule Log</div></td>
</tr>
</table>
Jerome Ribot
MacCoder
nsubs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en
-~----------~----~----~----~------~----~------~--~---
AwayBBL
test again on a real iPhone.
Jake Wolpert
<script type="application/x-javascript">
addEventListener("load", function()
{
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar()
{
window.scrollTo(0, 1);
}
</script>
isn't needed because the other script does it all.
AwayBBL
Actually I thought it'd be need for the initial load (I'm coding
without an iPhone so sorta flying blind)
But my bigger problem now is that the yule log gif file isn't
animating on most devices (wierd since its worked everywhere else)...
oh well