Select to view content in your preferred language

Hide address bar on map/page load in mobile device?

2035
2
Jump to solution
04-12-2013 12:05 PM
NickO_Day
Occasional Contributor
I'm trying to figure out how to automatically hide the address bar when the map is finished loading.  This can easily be accomplished on iPhones by creating a shortcut on the home screen by adding this to the head:
  [HTML]<meta name="apple-mobile-web-app-capable" content="yes" />[/HTML]
But... since I'm trying to make the user experience as consistent as possible (and not force users to create shortcuts) I need to hide the address bar in either case (and not use up valuable screen real estate).
Everything I've found so far relies on "scrolling" to the top of the page or setting the height of the page body to a few pixels larger than what is really needed.  In a map app, scrolling doesn't apply and the map element is loaded as height:100%... setting the height to 101% or higher doesn't work either (believe me, I've tried).

Here's what I've found so far (none of which seem to work in mobile Safari on an iPhone):
1) Adding this meta link in the head although the user-scalable=yes is contrary to the Esri JavaScript samples (where they list user-scalable=0):
    [HTML]<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />[/HTML]

2) Using straight JS to "scroll" to the top of the page
   
    function page_Load() {       setTimeout(function() { window.scrollTo(0, 1); }, 100);     }     


3) Wrapping the body in jQuery and using that toolkit to do the same thing as #2:
   
    $('body').scrollTop(1);     


So far, none of these things are working... does anyone know how to successfully hide the address bar automatically (while the device is oriented in portrait)?
0 Kudos
1 Solution

Accepted Solutions
NickO_Day
Occasional Contributor
Hi Steve,
Thanks for the input... it wasn't the solution that I was looking for, but still a cool little bit of code that will come in handy.  I can imagine using the full screen code you found will be useful when doing presentations on a large screen (when hiding the browser and rest of the desktop is smart).

I ended up finding the following slick bit of code that works perfectly:
http://menacingcloud.com/source/js/FlameAutoScroll.js

Problem solved!

View solution in original post

0 Kudos
2 Replies
SteveCole
Honored Contributor
I haven't dealt with this but a quick Google search revealed this.
0 Kudos
NickO_Day
Occasional Contributor
Hi Steve,
Thanks for the input... it wasn't the solution that I was looking for, but still a cool little bit of code that will come in handy.  I can imagine using the full screen code you found will be useful when doing presentations on a large screen (when hiding the browser and rest of the desktop is smart).

I ended up finding the following slick bit of code that works perfectly:
http://menacingcloud.com/source/js/FlameAutoScroll.js

Problem solved!
0 Kudos