🔒 Locked

[web] Sliding screens in a mobile web page

Started by theOcelot Jan 18, 2011 at 12:37 AM 3 replies 2.7k views

Original Post

Jan 18, 2011 at 12:37 AM

I'm writing a web page which I want to consist of a series of full-page-size screens which slide sideways on and off the screen. This is for simple math tests, but I've seen the same idea in online checkout systems and surveys. I've had trouble implementing it, though.

My idea was to make each screen a full-size div, get them to lay out side by side and use CSS animations to move between them. The "side by side" part turned out to be tricky, though. Lots of ways work for divs smaller than the screen, but the always want to wrap when they hit the edge of the screen. I've tried floating them all to the left and making them display:inline-block, I've tried using -webkit-box-orient:horizontal and overflow:hidden on the containing element(s), but it never works. They wind up going down the page. If I absolute-position them and use javascript, I have to move all of them (or at least the two visible at any time) at once to effect the slide. If there's a trick, I'm not getting it.

How can I make this work? How is it usually done?

Details: long story short, I'm using a mobile webkit browser embedded with a server into a mobile app. Long story: AppMobi.com

leiavoia

Jan 18, 2011 at 2:13 AM

http://flowplayer.org/tools/scrollable/index.html

theOcelot

Jan 18, 2011 at 7:41 PM

...which provides instructions for laying out divs side to side: http://flowplayer.or...able/index.html. Cool. The trick is to have a really, really wide div between the outer one and your items, and then put overflow:hidden on the outer one, as well as putting float:left on the items.

Full (basically) minimal example, a slight mishmash of my and Scrollable's requirements with the absolutely essential parts marked:

<html>
 <head>
 <title>Horizontal Layout</title>
 <style>
 body, html{
 margin: 0;
 padding: 0;
 }
 #scrollable{
 /* required for sideways layout */
 overflow: hidden;
 /* required for jquery tools scrollable */
 position: relative;
 width: 100%; /* any dimensions should do */
 height: 100%;
 }
 #items{
 /* required for sideways layout */
 width: 2000em; /* arbitrarily large; can't be too big */
 /* required for jquery tools scrollable */
 position: absolute;;
 /* then whatever other properties you need */
 height: 100%
 }
 .item{
 /* required for sideways layout */
 float: left;
 /* then whatever other properties you need */
 width: 20em;
 height: 100%;
 border: 1px solid black;
 }
 </style>
 </head>
 <body>
 
 
 
 I'm in the first box. Use a small browser window to get the full effect.
 

 
 Second box.
 

 
 Third box.
 

 
 You get the idea.
 

 
 Can you see this one?
 

 

 

 </body>
 </html>

I'll probably need to use javascript to get the individual pages to be the same size as the screen, since the extra-wide div messes up width:100%, but that's only a slight hack, and I was willing to consider worse.

Thank you.

theOcelot

Jan 19, 2011 at 5:01 AM

And now it's successfully integrated. Now if I can just put an iScroll in each screen...

theOcelot

Jan 19, 2011 at 5:02 AM

Edit: crud, how do I delete posts now?

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.