I've seen plenty of scripts on the web about hiding the address bar by scrolling down to hide it etc. But I noticed that Apple actually hide it completely as in make it disappear!
http://help.apple.com/iphone/5/interface/ on your iPhone you will see the bar removed...
How do I do this? Thanks
They're doing event.preventDefault() on the touchstart event and handling scrolling in their own code.
They're not removing it. It's behaving in the same way as every other webpage does in Mobile Safari. The difference appears to be in the way they're displaying the page itself. If you tap on the Status Bar while looking at that webpage the navigation bar appears for you.
I switched my useragent on Safari to Mobile Safari and it looks like they're not actually scrolling the page when you swipe, but have a div setup with overflow:hidden; and you're scrolling inside that div instead of the page itself.
(Edit: This appears to be in addition to hiding the bar by scrolling down the page)
To hide the address bar, use jQuery and execute the following on document load:
jQuery(function($) {
$('html,body').scrollTop(0)
};
The address bar will disappear and will reappear only if the user touches the screen to make it reappear.
Related
I am trying to add navigation view to my app, but it is causing issues. My main UI is an infinitely swipe-able carousel of pages. It originally looks like this:
Then when I wrap it in a navigation view, it opens like this, with a back button and nothing else:
When I hit the back button, it looks like this:
The left side is swipe-able like the original UI, but when I touch the right, grey side, it takes me back to the empty page with the back button.
Any idea what may be causing this? I implemented the infinite carousel by putting each page in a ZStack, and using offsets/relativeLocation. I referred to this tutorial:
https://www.youtube.com/watch?v=fB5MzDD1PZI
Can I not use a NavigationView? Is there an alternative route I can take in which I create my own top NavBar and navigate to separate views without NavigationBar/NavigationLink?
Any help is appreciated and please feel free to ask questions, etc. Thanks!
You want to apply StackNavigationViewStyle to your NavigationView.
NavigationView {
...
}.navigationViewStyle(StackNavigationViewStyle())
You're experiencing an unwanted split view, and you can find more info here.
For larger devices like an iPad or iPhone Pro Max in landscape, it defaults to DoubleColumnNavigationViewStyle.
I am building a site that has a header with a fixed position which contains a select menu. The header is supposed to stay locked to the top of the screen due to the position:fixed in css. However, when clicking the select menu in mobile safari on iphone, the header no longer stays locked to the top when the ios select menu opens. It seems that ios is centering the div with the select menu onto the visible area of the screen above the menu. This doesn't happen when the page is scrolled to the top, but when the address bar is not visible, it "breaks" like so. Haven't found any other answers, maybe I'm asking the question the wrong way. I can't post links to code yet, any help is appreciated.
http://selfconstruc.tv/menu-open.PNG
http://selfconstruc.tv/menu-closed.PNG
For now I don't think there is a perfect solution to deal with the focus jumping.
In my case I hide the header on focus in and show again in focus out and it works well.
I don't know if in your case this could be a workaround.
You can try this:
// detect ios device
if(navigator.userAgent.match(/(iPad|iPhone|iPod)/gi)){
// hide header on focus in and show on focus out
jQuery("#content").focusin(function(){
jQuery('#your-header-id').hide();
})
jQuery("#content").focusout(function(){
jQuery('your-header-id').show();
})
}
The #content is a div where you should have all your controls, the jQuery .focusin() detects the focus event on parent elements, so every control will trigger the focus event. You hide the header on focus and show after that. Hope this helps!
On my webpage, I use ajax to load some offers. Issue shows up on ios6... unless the bottom of the page is visible, as soon as I scroll down into the available offers, the browser jumps to the top of the page. This happens the same in both chrome and mobile safari in ios6. If i very quickly scroll to "bounce" the bottom of the page, it stays. As soon as i scroll up and bottom is no longer visible, it jumps to the top.
Anyone have any idea how to code around this, so that the scrolling works properly?
I want the address bar to disappear on the iPhone. So far I have used:
window.scrollTo(0, 1);
This hides the address bar when the page is first loaded.
Then I have
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
This prevents the user from scrolling back up to the address bar (or anywhere else) while still allowing buttons to be tapped.
But, the address bar still appears when I tap the top of the page. Not sure if this is because I am touching the top of the webpage or because I am touching the bar with the clock and battery.
I'm guessing that the user himself would need to set this option on his phone, although it would be nice if I could control it via the webpage. Is either way possible?
Why? I want to make a web app for a disabled child who has a hard time controlling his movements. I essentially want to turn off any touch actions that aren't related to the web app itself. Otherwise he will accidentally set off lots of unwanted actions. Not sure if this is possible.
I'm afraid you can't hide the status bar. For example in iOS 6 you can, in landscape mode, go full screen, it hides the status bar, but there is a new button at the bottom right of the screen to leave the full screen mode.
What you are asking is not achievable within Safari. But you can develop a simple application full screen (no adress bar, no buttons, no status bar) with a simple UIWebView. This way there will not be any unwanted action.
I need the lightblue bar to scroll up (hide) and display the Facebook bar. For example look at this image.
I need the light blue bar (which contains the search bar, refresh button) to be scrolled up, so it hides and displays from the Dark Blue Facebook bar as shown in this image.
I have seen this in many applications but, how can i implement it in my application programatically ?
There's no way to control safari from your app, and since Facebook serves the HTML there's no way to alter that either. So to achieve what you're looking for you could create your own UIWebView and present it modally instead. The issue you'll have here, though, is that you won't have access to the users cookies, so they'll have to log in to Facebook again.