With reference to the question I asked couple of days back, it seems to me that address bar cannot be hidden from a xpages mobile web application when it is launched from a href link. Choice is limited to href as "location.assign" or any javascript will not work on mails accessed by lotus traveller. I tried almost 20 different variations published by other experts to hide address bar and none seems to work. Am I wrong in stating that "it is not possible to hide address bar in Xpages mobile web application on ipad when not launched from home screen"?
The following works on iPhone and iPod Touch (and is similar to the solution I linked to in the answer to the other question that you mention).
Create a client-side JavaScript library with the following logic:
function hideAddressBar(){ window.scrollTo(0, 1)}
window.addEventListener("load", hideAddressBar, false);
Add the following to a layout custom control or similar in order for this to run on all the XPages where you want to hide the address bar (here I assume that the client-side JavaScript library is called addressbar.js:
<xp:script clientSide="true" type="text/javascript" src="/addressbar.js"></xp:script>
Have a look at the ITANA Tasks project on OpenNTF which uses this solution to hide the address bar.
For iPad it is not possible to hide the address bar when running in Safari. To hide the address bar on iPad you need to launch the app from the home screen (and set the usual required meta tags).
Related
There seem te be some subtle differences in the Implementation or configuration between WBWebView and Safari (and SFSafariViewController) that renders a part of the Website I want to display unusable.
Here is what I am trying to do:
Basically all that is needed is an "App" that just opens a specific website in fullscreen mode, so no chrome, URLs or additional navigaton buttons are present. The Website works fine on Safari on iOS (and every other (modern) browser on desktop or mobile) but the menu does not when embedded in the App.
All I did was creating a new single view Application in Xcode, drop in a WKWebView and have it load the URL. The part of the page not working is this menu component that is used throughout the site: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ So basically the user has no way to navigate. While debugging the website it seems like when I push the menu button the menu does not expand like it should because the changed css classes dont get picked up correctly. If I manually toggle the css classes on the menu-element it gets displayed correctly. It makes me wonder if there are some additonal constraints related to WKWebView?
Can anyone tell me if there are any settings or configurations I can alter that allow the website in WKWebView to behave exactly the same as it would under Safari?
As far as I understand SFSafariViewController I always get the browser toolbar and navigational elements which I dont want to have in the app, so that is not an option- or is there a way to get rid of that?
Any help or pointers would be greatly appreciated :)
I am using Angular UI Router. Whenever I click on a link with ui-sref the address bar from ios mobile browser shows up. For example when I scroll down, the address bar hides and if I click on a link and the page transition finishes the ui address bar shows up instantly. This makes it less user friendly as the page suddenly shifts a little downwards because of the address bar.
This website has the same issue that I have.
I have found a website that doesn't have this issue although they are not using angular.
This does not happen on android chrome. And only happens in the ios safari. The version that I have tested in was ios 9.
I have tried overflow hidden but this is not the solution that I want because then the address bar is always visible.
What's triggering this behavior?
I have not tested this, but I remember having a similar issue a while back.
I think you could add this meta tag:
<meta name="viewport" content="minimal-ui”>
Check out these other posts: Post 1, Post 2.
Note: minimal-ui is no longer supported in iOS 8 and above (More info). However, not all users have upgraded to iOS 8, so there is still a reason to add it to your project.
This question already has answers here:
How do you keep an iPhone/iPad web app in full screen mode?
(6 answers)
Closed 8 years ago.
I'm trying to figure out the most efficient approach to tackle an issue. I have wonderful WP themed website that I want to show full-screen on my iPad. Here's how it currently operates:
Once a user has saved the website to their iPad via ‘Add to Home Screen’, the site will launch full-screen (absent any Safari interface) when that icon is pressed. However, a new tab is created with Safari interface items visible once the user clicks on any menu item. I want to keep the full-screen experience (without tabs) while the user remains within the site. I only need this to work when launched from home screen icon in the latest iOS.
1) What is causing the site to launch a new tab? Default mobile safari action due to lack of full-screen code, the way the nav URLs are coded, or other?
2) Is it just a matter of adding some header code to the remaining pages (via child theme or directly to the theme templates)?
Here is the website: http://www.sofla360.com
I've dabbled with the iOS full-screen code previously, but nothing very complicated nor with a WP theme. Figured I'd start here in case anyone had some insight on this topic.
Thanks!
The code I found here works with 99% of my WP-themed website. I created a child theme and placed the code in the head section of the header.php file.
I am trying to use the iOS smart app banner on my website. I am currently using jquery mobile 1.3.1 for development. The problem I'm having is jquery mobile automatically hides the address bar on page load. Since the smart app banner appears to be a part of the address bar, the user cannot see the smart app banner unless they scroll up. Is there anyway around this problem? Ideally the page would load and show the smart app banner and not the address bar. However, at this point I would be fine showing both on page load. I know the folks over at HTML5 Boilerplate have solved this issue. See:
Hiding address bar without hiding the smart app banner on iOS 6
The problem with this solution for me is turning off the hide address bar feature in jquery mobile. I can't seem to figure out how to accomplish without altering the jquery mobile core code. I don't really want to alter the jquery mobile code. Mainly because I don't like changing code that I have to update when a new version comes out. Plus I am pulling the jquery mobile file from jquery's CDN. I would like to find another way to solve this problem. Any ideas? Thank.
Add
window.oldScroll = window.scrollTo;
window.scrollTo = function(){return false;};
before you load jquery mobile. This will override Jquery mobile hiding. then you can use the helper.js by reassigning scrollTo after jquery mobile script.
I've happily developed a mobile website using JQuery Mobile, and everything works beautifully except for a noticeable delay hiding the browser address bar on the homepage (around 5 seconds on iOS Safari).
AJAX transitions mean it's always hidden from that point on, but on the opening page the site logo is hidden for up to 5 seconds after the page has loaded, giving it a very unbranded and confusing feel for the user.
Can anyone think of any reasons for the delay / ways to speed it up? There are no large images loading on the page, putting an alert in the window load event fires way before the address bar is hidden and the setTimeout delays on the code firing in the JQuery Mobile code are only of the order of 20 ms.
Thanks in advance, Ted
I use Mobile Boilerplate's MBP.hideUrlBarOnLoad() and am not experiencing a five second delay.
Hide URL Bar
MBP.hideUrlBarOnLoad is used to hide the URL bar at the top of mobile
Safari on your iOS. Mobile space is limited and this helps to leverage
every pixel on the screen to maximize display area.
Sadly I've had to resort to a pretty hacky solution to this.
I've added a dummy 60px high spacer div at the top of the page, which pushes down the title, so it is visible at all times. This is then hidden by Javascript after 5 second setTimeout call, which is roughly equivalent to the delay we get on the url bar being auto-hidden by JQuery mobile.
This is only necessary on the start page, and other ones that we've had to load on rel="external" links, due to us making the error of mixing an ASP.net site that requires postback with JQuery mobile, but that's another story...
I've seen this happen when the content is Safari "Reader" compatible (when you see the "Reader" label next to the url on the url bar). I'm not sure but if this is the case maybe you could try to make your content less Reader compatible.