Okay I am building a mobile application base off a web application with JQuery Mobile.
I have
<meta name="apple-mobile-web-app-capable" content="yes">
Set in the head tags of each page, in my navigation I am linking to a new page of /people.php for example and its busting out of the application that is on the homescreen that has no browser bars and opening up the browser to load that page. I want to load that page inside the application on the home screen. I am also going to have a few things like the login post to login_submit.php later and need them to stay in the application because the login_submit.php is going to bring them to the home.php page. I want everything to process in the application that is added to the home screen. How can I accomplish this?
I ended up figuring this out. I built the code below. I just have to restructure all the links and it will work.
Here is the HTML
Go
Here is the javascript I run on the top of everypage. It gets all of the web pages and keeps them inside the full screen mode. If their is a lot of content on the new page it may take half a second longer to load but get the job done.
function navigator_Go(url) {
window.location.assign(url); // This allows links to stay in full screen mode
}
Related
I have a list of urls I need to show on a screen for a presentation. After the page have loaded, I want to scroll to the end of the page, and when it's reached load the next one.
The problem is, most of those pages have 'X-Frame-Options' to 'sameorigin', so I can't use iframes. What other options do I have ?
I thought about, maybe, a chrome extension will complete rights over navigation that would handle the whole process...
Thanks ahead.
So, the solution was indeed to build a Chrome extension. Only the software containing the page gives you that much control over it when you don't have access to its code - namely, the browser.
I built a very simple extension using chrome.tabs in the background to open a new tab or update it, injecting a script in the page whenever it's loaded, and using messaging to inform the background when scrolling is finished and it's time to load a new page in the list.
I think this question was asked in a similar form before but I didn't get a clear understanding how to implement it properly.
I have a site, which has different pages on their own urls, like '/contact', '/about', '/products'.
What's the technique to put a top bar on the top like this one http://nanobar.jacoborus.codes/?
Here is what I need:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was.
So, I can technically run some function on every page, like showGrowingProgressBar(value), but since I don't know where it left, I cannot put it in the same progress state as where it left.
How do I make it look natural, like the user didn't leave the page, but more like an SPA experience?
I guess you want to build an one page web application where things load in the same page without refreshing.
You can use AJAX to do this. you can populate a particular div with the new html without refreshing.
It can be handled more easily using Angular JS. You can define routes for every page and can also have templates for different page, and can load that template when user clicks on the link. It will just replace the container div with new html codes and you can also handle the urls easily.
Turbolinks seems to be what you are looking for. It dynamically loads your pages and shows a loading indicator.
Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual. When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load.
Your approach is:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was
Your approach should be:
User clicks a link on the page.
JavaScript handles the click, browser starts loading the page. At this moment, page clears and becomes white and blank.
New page shows the progress bar, starts growing it then passes the event to browser. The growth can be picturized by the no. of API call completed divided by total no. of api calls, required for that page.
In AngularJS, I am trying to have a dynamic apple-itunes-app smart banner for iOS safari. I have one single section for the app in my index.html as I am using ui-router.I have successfully displayed the smart banner using this metatag:
<meta name="apple-itunes-app" content="app-id=111111111">
Now I am trying to add the app-argument dynamically depending on which AngularJS controller is active. I wish to allow users to access the same content in the app, like this:
<meta name="apple-itunes-app" content="app-id=111111111, app-argument={{inAppPath}}">
When I check in my dev tools as I go through my different views loading all the controllers the variable( {{inAppPath}} ), updates correctly. I know the inAppPath works when entered directly on the address bar. Still the banner will only open the app in the home page, not following in app-argument. Initially, I believe the app-argument is not getting set in time for the browser to evaluate it. Is there a way to reevaluate or reload the meta-tag/smart banner when the app-argument changes?
I've tried:
Removing old tag and appending new tag from the head with jqlite.
Using navigator.platform to detect iOS, but cant figure out how to
see if app is installed.
This is an issue I ran into before and I am still unsure as to why it happens.
The page in question is - http://nexrem.com/dragontimer/testdir/mobile/index.html
When you hit the Select server button, the page flashes the content that should be there, then its blank! One way I know this can be fixed is by adding data-ajax="false" to the link; however if I do that, then I run into another problem: on iPhone if I add the page to my home screen and then run it - click the 'Select Server' - opens up a browser instead of staying within the web app.
My goal is for users to be able to add the page to their home screen, with no url bar and just run all pages from within. It seems that having <meta name="apple-mobile-web-app-capable" content="yes" /> and the data-ajax="false" together isn't working out.
So basically 2 things:
How can I fix the screen flashing and displaying blank (unless refreshed)
or how can I have the web app with no toolbar and not open the browser every time user clicks buttons?
Thank You
Edit: Here is the code for index.html and servers.html
index.html - http://pastebin.com/Qh5s7QRp
servers.html - http://pastebin.com/Exv2MJrS
In your file index.html, include rel="external" instead of data-ajax="false" inside the definition of your link Select server.
So, you should have this instead:
Select server
You may also need to replace every data-ajax="false", that you included in the <a> links of both your HTML files index.html and servers.html, with rel="external".
Check the online doc for more information about rel="external" at http://jquerymobile.com/test/docs/pages/page-links.html :
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Hope this helps.
I have a web app I'm building a mobile site for. I'm trying to run it in full screen without a nav bar if the user has added the page to their home screen.
Right now, my javascript is very simple:
if (navigator.standalone) {
alert ('From Home Screen');
} else {
alert ('From Browser');
}
All I want to check to see is if I can detect whether or not the user has added the app to their home screen. With the code above, even after adding the app to the home screen, the app is only ever being caught by the else statement.
Looking through apple's documentation, I found this goody:
<meta name="apple-mobile-web-app-capable" content="yes" />
Adding that code to my didn't seem to do a thing. I still cannot get the site to go into fullscreen mode, or alert it as standalone.
That meta tag is (apparently) processed when the link is added to the home screen. So, if you added it to your home screen before adding the meta tag, it will have no effect.
Try removing the icon from your home screen and adding it again.