Welcome, Guest
Username Password: Remember me

iPhone navigation bar hide
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: iPhone navigation bar hide

iPhone navigation bar hide 14 years, 5 months ago #330

  • Scottte
  • OFFLINE
  • Fresh Boarder
  • Posts: 3
  • Karma: 0
In order to hide the navigation bar when a page first presents in the iPhone, I put this code in the html of the mobile_iphone template at the end before the end html statement. The effect is the page is presented at 0,0 and the navigation bar scrolls up under the Apple iPhone header after the page completes loading. This gives more realestate. The navigation bar is still there, the user just needs to move the page down to see it. This does not erase the page position value though if the user switches between pages. It seems to just affect the first time a page is presented. I noticed Google does this for their iPhone display. Not sure where this belongs. It could be a iPhone set-up switch or could be added to the mobileJoomla template at downloading as a comment or remain tribal knowledge in the forum.

<script type="application/x-javascript">window.scrollTo(0,0)</script>

iPhone navigation bar hide 14 years, 5 months ago #1755

  • dagobert
  • OFFLINE
  • Fresh Boarder
  • Posts: 14
  • Karma: 0
Hi Scottte,

The window.scrollTo(0,0) trick does work - as long as the screen does not scroll, when I'm not wrong.

An additional possibility is to add the following meta code to the header section of the iPhone template, so when creating an application shortcut to the Web-page and launch the Web application using the shortcut, the iPhone Safari shows your Web-App in full screen - works since iPhone OS 2.1:

<meta name="apple-mobile-web-app-capable" content="yes" />


Would be perfect, if these "features" will become standard (or configurable) in MobileJoomla.

Reference: Apple-Specific Meta Tag Keys

-Kurt.

iPhone navigation bar hide 14 years, 5 months ago #1756

  • dagobert
  • OFFLINE
  • Fresh Boarder
  • Posts: 14
  • Karma: 0
Another nice addition for the iPhone world would be adding the link to a user configured PNG as a custom icon:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />


Reference: Create an Icon for Your Web Application or Webpage
  • Page:
  • 1
Time to create page: 0.14 seconds

By continuing to use this site you consent to the use of cookies on your device as described in our cookie policy unless you have disabled them. This site will not function correctly without cookies.

I accept cookies from this site.