?
Solved

Any way to permanently hide the address bar on mobile app?

Posted on 2012-08-17
28
Medium Priority
?
1,728 Views
Last Modified: 2013-11-21
I have researched all over the internet and the only company that I have seen that is successful with this is SENCHA, but can someone tell me how they permanently hide the address bar on their mobile web apps?

I can obviously do it onload, but I want to keep it hidden no matter what the use does. And not with the bookmark trick either. ;)

Thanks

judson
0
Comment
Question by:judsonmusic
  • 10
  • 6
  • 5
  • +2
26 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38305685
If you can find their source code look for the "fullscreen" functionality
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38305875
kozaiwaniec no offense but if I could find it, I wouldnt be asking this question. ;)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38316151
Why?
If you don't want something to be public, don't put it on the Internet
What are you hiding?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:judsonmusic
ID: 38316155
on the iphone  I want to hide the url bar like SENCHA does on there apps to mimic a native app. Whats so difficult about this question?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38316172
http://davidwalsh.name/hide-address-bar
// When ready...
window.addEventListener("load",function() {
	// Set a timeout...
	setTimeout(function(){
		// Hide the address bar!
		window.scrollTo(0, 1);
	}, 0);
});

Open in new window

0
 
LVL 26

Expert Comment

by:Eddie Shipman
ID: 38316178
You must set the app to stand-alone mode. See if this works for you.
if(!!navigator.standalone) {
document.documentElement.setAttribute('class', document.documentElement.getAttribute('class') + " standalone");
}

Open in new window


For iPhone apps, use this meta tag:
<meta name="apple-mobile-web-app-capable" content="yes" />

Open in new window

0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38316219
That doesn't seem to hide it permanently, just the first load. look here:

http://www.meyearly.com/mobile/
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38316398
did you add the javascript?  What I posted was not jquery just js.
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38316442
Yes like this.

$(function(){
      if(!!navigator.standalone) {
      document.documentElement.setAttribute('class', document.documentElement.getAttribute('class') + " standalone");
      }
});
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38316455
What is difficult is that it is frowned upon and hence not simple if at all possible. If we knew the reasoning other than cosmetic, perhaps we could come with alternatives such as iframes or ajaxed divs
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38316477
When I went to your site on my android phone the All Albums seems to work but not the home page.  

Just to be sure, you are checking this on your phone?  Desktop browsers will not remove the address bar anymore.  But mobile will.

Did you try the  DavidWalsh link I showed.  That too you need to use the meta tag.
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38318083
The David Walsh link only hides it temporarily. I want to disable then user being able to scroll down and show it like Mobile versions of freecreditscore.com does. This gives the appearance of a native app.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38318213
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38318223
freecreditscore.com is native.  I think any of the options here will be temporary as far as hiding the address bar.  If you want the complete native look without having to do a lot of native coding, then you just need to create a native app and use your html site as the code by linking to your site from within the app.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38318231
They are not native on my iPhone. They just scroll
0
 
LVL 26

Expert Comment

by:Eddie Shipman
ID: 38318424
In Sencha2, you can try to set autoMaximize in the viewport config:

Ext.setup({
    viewport : {
        autoMaximize : true
    },
    ...
});

Open in new window

or
Ext.application({
    viewport : {
        autoMaximize : true
    },
    ...
});

Open in new window

Look at the API docs as there are some important notes to take note of:

http://docs.sencha.com/touch/2-0/#!/api/Ext.viewport.Default-cfg-autoMaximize
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38318505
"Native" is confusing.   You can load a site from within a native application.  It does not mean you have to write all your code natively.
0
 
LVL 26

Expert Comment

by:Eddie Shipman
ID: 38320460
@padas, have you tried ANYTHING I've posted?
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38524268
Can someone please post a working example that is not a SENCHA thing? I would rather use jquery or javascript alone without depending on another library.

Thanks

Judson
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38524559
I think you have received all possible ways.
Hope you solve it.
0
 
LVL 26

Expert Comment

by:Eddie Shipman
ID: 38526001
You requested SENCHA solutions, why the change? You should accept an answer and ask another question if you want a different solution.
0
 
LVL 3

Accepted Solution

by:
judsonmusic earned 0 total points
ID: 38526022
I figured it out. The guys a freecreditscore.com are createing a fixed header, scrolling the document up, the applying a scroll to the content which basically prevents the document from scrolling therefore "hiding" the browser chrome permanently!
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38526048
I did NOT request sencha as a solution I simply stated that "the only company that I have seen that is successful with this is SENCHA,"

I also stated that I did not want to have to use their library to accomplish this.

Thanks

Judson
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38526069
I can pull down to see the address on their page
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 38526229
When you have an account with then its works normally sorry. Their public page is indeed not right.
0
 
LVL 3

Author Closing Comment

by:judsonmusic
ID: 38542972
This answered my question for hiding it permanently.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question