How to completely hide the navigation bar in iPhone HTML5

Question

I m really new to HTML5 for mobile  I use jQuery Mobile for my current app and I have some problems hiding the navigation bar   I found this site  http   m somethingborrowedmovie warnerbros com    I do not paste this link to promote the movie    I was just amazed by this HTML5 site  Does anyone have any idea of the method used to hide the navigation bar   The menu is also really well done  Is there any framework to build apps like this one

User · Accepted Answer

Try the following    Add this meta tag in the head of your HTML file    lt meta name  apple-mobile-web-app-capable  content  yes    gt   Open your site with Safari on iPhone  and use the bookmark feature to add your site to the home screen  Go back to home screen and open the bookmarked site  The URL and status bar will be gone    As long as you only need to work with the iPhone  you should be fine with this solution   In addition  your sample on the warnerbros com site uses the Sencha touch framework  You can Google it for more information or check out their demos

User · Answer

Remy Sharp has a good description of the process in his article  Doing it right  skipping the iPhone url bar       Making the iPhone hide the url bar is fairly simple  you need run the   following JavaScript  window scrollTo 0  1         However there s the question of when  You have to do this once the   height is correct so that the iPhone can scroll to the first pixel of   the document  otherwise it will try  then the height will load forcing   the url bar back in to view       You could wait until the images have loaded and the window onload   event fires  but this doesn t always work  if everything is cached    the event fires too early and the scrollTo never has a chance to jump    Here s an example using window onload  http   jsbin com edifu4 4       I personally use a timer for 1 second - which is enough time on a   mobile device while you wait to render  but long enough that it   doesn t fire too early   setTimeout function        window scrollTo 0  1      1000         However  you only want this to setup if it s an iPhone  or just   mobile  browser  so a sneaky sniff  I don t generally encourage this    but I m comfortable with this to prevent  normal  desktop browsers   from jumping one pixel     mobile i test navigator userAgent     setTimeout function        window scrollTo 0  1      1000         The very last part of this  and this is the part that seems to be   missing from some examples I ve seen around the web is this  if the   user specifically linked to a url fragment  i e  the url has a hash on   it  you don t want to jump  So if I navigate to   http   full-frontal org tickets dayconf - I want the browser to scroll   naturally to the element whose id is dayconf  and not jump to the top   using scrollTo 0  1     mobile i test navigator userAgent      location hash    setTimeout function        window scrollTo 0  1      1000          Try this out on an iPhone  or simulator  http   jsbin com edifu4 10   and you ll see it will only scroll when you ve landed on the page   without a url fragment

User · Answer

The problem with all of the answers given so far is that on the something borrowed site  the Mac bar remains totally hidden when scrolling up  and the provided answers don t accomplish that  If you just use scrollTo and then the user later scrolls up  the nav bar is revealed again  so it seems you have to put the whole site inside of a div and force scrolling to happen inside of that div rather than on the body which keeps the nav bar hidden during scrolling in any direction  You can  however  still reveal the nav bar by touching near the top of the screen on apple devices

User · Answer

Simple javascript document navigation to     will do it   window onload   function     document location href            This will force the navigation bar to remove itself on load

[html] How to completely hide the navigation bar in iPhone / HTML5

Examples related to html

Examples related to mobile

Examples related to iphone-standalone-web-app