PDA

View Full Version : Hiding menu bar and timing...



nosarious
4 Aug 2010, 10:20 AM
I have a project which involves hiding the menu bar in safari. This sometimes works but sometimes results in an empty space at the bottom which is equal to the height of the menu bar.

I have been trying to determine if this is perhaps a timing issue... If the menu bar is still showing the progress bar for loading before an integral part of sencha has determined the size of the viewport, it gets the wrong size and the active area is too short...

Does anyone know of a way to "trick" an HTML page I to thinking it is done loading and hide the menubar before rendering the ASGtm (awesome sencha goodness)

Rohall
4 Aug 2010, 10:28 AM
How are you hiding the menu bar?

nosarious
4 Aug 2010, 10:44 AM
Some tricks from the web... http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone (among others)

The code is basically this:


<body onorientationchange ="setTimeout(function(){window.scrollTo(0,1)},100);updateOrientation();"
onload ="setTimeout(function() {window.scrollTo(0,1)},100);">

It does this onload, so if I can make it think the loading is finished before Sencha sets up the sizes for the containers, that would be great.
It is inconsistently misbehaving when loading the page for the first time, but failing pretty consistently on the orientation change.

Even a way of making the system hide everything, placing a notification that it is redrawing things, fake the 'I'm loaded" message to safari, place everything with the full screen and then removing the notification might work...

Currently you can see everything being shuffled around, but since it isn't as smooth as I would like (I would much rather be able to use my own transitions and transformations) I may as well hide5 6everything while it redraws.

A sample of it with 0.93 here: http://straathof.acadnet.ca/beta2.1/

Rohall
4 Aug 2010, 11:16 AM
Hmm thanks! Very interesting. On the initial load it appears to work, but after two orientation changes we are left with a 60px white space at the bottom of the screen.

nosarious
4 Aug 2010, 11:30 AM
yes. On slow connections, however, the initial load does not work and gives the same gap. That's why I think it is a timing problem... When does the browser determine a page as 'loaded' and when does Sencha grab the size for the viewport.

If there was a way to incorporate this shuffling before the carousel is rendered, that would be awesome. I haven't the foggiest idea where to put it, however.

(I tried using my own class to do this, using a 480px x 320px dimension for each orientation, but it affected several other elements, including the title, which is scaled from one orientation to another.)

Rohall
4 Aug 2010, 11:45 AM
I've been putting it in an orientationchange listener in sencha. Still not having much luck. In my solution, if you rotate from portrait to landscape to portrait and then back to landscape you'll see the white block (only in landscape view though...)

cnelissen
4 Aug 2010, 2:26 PM
Devs have said that is something the hope to have working by the time 1.0 launches. Safari will actually hide the location bar automatically if there is scrollable content, however the framework currently doesnt create any viewport element greater than 100% height. Not sure how they plan to fix it, but apparently they know how to go about it...

nosarious
4 Aug 2010, 2:58 PM
it gets weirder. If one clicks on one of the images in the text in the example, it changes the background image. Weirdly enough it changes the background to cover the entire exposed viewport...

so...

the background for <body> covers the entire viewport, regardless of the carousel. I wonder if there is a way to 'draw' a full scale graphic or element that sits under the carousel before the carousel is drawn. Would that fix the problems, I wonder?

Rohall
5 Aug 2010, 5:45 AM
cnelissen, have you heard any word on what beta release this will be a part of? It's become critical to the project I'm working on and I hate spending so much time trying to perform a hack to get the desired result.