Some apps got tutorial when the first time open.It seems cool.
I'm trying to create an opening tutorial that consists of four panes for my AngularJs app.
I build my app with css3 and html5 ,use cordova to generate apk.
How to create tutorial for my app when the first time open it?
Is there any solution?
Thanks a lot!
Sorry maybe I didn't make myself clear.The app is almost done,and splash screen has done.
But I need few pages or images on the first time run.
Use database. For example if you use localStorage, inside the deviceready function
check=localStorage.getItem('first_time');
if(check.length<0)
{
startTutorial();
localStorage.setItem('first_time','NO it is old');
}
After the first run value will be changed and tutorial will be shown once.
You can use other databases like indexedDB or webSQL.
Related
I truly don't know how to fix it, I was looking for the tutorial from any sites, any video, and I can't find it especially for cordova
Note: I'm using AngularJS
Without your code, we can not help you, but here are some advice to do the job :
Cordova is based on HTML/JS/CSS, so implementing an "basic" slider ll do the job for you.
check this one, simple and working on mobile :
https://codepen.io/zuraizm/pen/vGDHl
by default hide the slider :
$('#slider').hide();
and to launch it just one time create an simple variable and save it into localStorage.
localStorage.setItem('slider_viewed', 1);
once done, modify your slider code and check if variable is not in localstorage, you ll show the slider to the user.
if(localStorage.getItem('slider_viewed')==1) $('#slider').show();
I am building one hybrid app using ionic. Where I am sharing pictures using ngCordova's $cordovaSocialSharing plugin. I am using the general share() function to share on any shareable platform. The feature is working fine but the main bottleneck is, it's taking about 5 seconds to show the list of shareable mediums. I have checked the plugin builder's GitHub, this problem is open in the issue list. So I want to know is there any other way to optimize this.
Thanks in advance.
I am trying to design a mobile first web app using Google Apps Script.
I would try to replicate the most basic Bootstrap page (http://getbootstrap.com/examples/navbar) in a Google Apps Script.
This is the way the bootstrap page should render on my mobile device:
but instead my page loads like this (ie. http://goo.gl/yZpgUg):
This is my code.gs:
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
My index.html is copied and pasted from http://getbootstrap.com/examples/navbar with CDNs replaced as appropriate.
I figured HtmlService.SandboxMode.NATIVE was important to get this to work but doesn't seem to work.
Dear world - any help would be greatly appreciated.
Cheers.
UPDATE 1 - (THANKS FOR YOUR RESPONSES!)
in IFRAME:
IFRAME console errors (2):
NATIVE console errors (lots):
Bottom line - clearly GAS is not liking it and doesn't seem super straight forward - I've ended up turning the GAS into an API which returns JSONP from the spreadsheet I need - much more straight forward. Thank you for all your help!
I know you decided to go another route, but I got this to work in the same scenario. You can simply add the meta tag on the GAS code using the following code:
var output = HtmlService.createHtmlOutput('Hello, world!');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
So when you serve up your html in doGet add the meta tag. Check out this link for more information: https://developers.google.com/apps-script/reference/html/html-output#addMetaTag(String,String)
Apparently Google can't load Bootstrap from their server, try copying everything to GAS and include in the page as explained in best practices. Also switch back to IFRAME when testing.
I want to create an angularjs app but each time it requires to press the refresh button in the browser to get the update. thus it bring to this question:
Is there any way to get live update while writing angularjs app? So I don't need to press the refresh button each time I make changes in my angularjs app.
Yes, you can use grunt which is a task runner written in node, grunt has a plugin called grunt-contrib-livereload that reloads the page whenever there are changes in the files/directories that you want to watch. Alternatively, there's a scaffolding tool for client side web applications in AngularJS called yeoman, that has a generator called generator-angular - this generator has an opinionated structure towards AngularJS application development and it comes with a basic setup that you can use for livereloading code changes from any files that you have configured to watch.
Start using yeoman. It has grunt that will solve yr problem plus lots of more exciting stuff.
Check this quick start guide : http://yeoman.io/learning/
I use the open source editor Brackets.io by Adobe. Just click the lightning icon button to the right of the editor to run your web page and will auto refresh for every save.
You can do this in many ways. Many of the options are already mentioned in this post. All of them are workable. In my experience the most simplistic way to do this by the following way.No configuration , No setting , No need to code anything.
Just add this line in your <head> </head> tag of the html file
<script src="http://livejs.com/live.js"></script>
I could not think of a better title, Please suggest one.
I am planning to work on a large web application. It will take time to load the full application before application starts functioning.
Suppose its something like asana.com. If you have a link to the task and you open the link. It loads the application first and then shows the detail of the task.
Note: I have added another example in update 2
I want to do just the opposite. Suppose if I try to open the link directly. It should show me the tasks details first and then load the whole application in background.
What development strategy should I follow to implement such feature. Will angular be good for this? I have worked with angular for small projects and am capable of think in angular :)
I just wanted to be pointed in right direction.
Update 1:
I am using Apache2 PHP5 in backing as ReST API. I am thinking to change to GoLang http server. But that does not matter in this context :)
Update 2:
I have not yet started working on the application, but I know that its size is going to be big and its going to take time to load the application. This will be a javascript application, all the communication to web will be done mostly by API. APIs will be fast and it wont be slowing down the application. My main concern is the javascript library and the approach to the issue that I want to display the content of the page before the application is loaded and load the application in background.
As second example: https://chrome.google.com/webstore/detail/a-journey-through-middle/gjgkjeheegjnnmheaflhdocglkiegoni?utm_source=chrome-ntp-icon
If you open this link in chrome, it will load the application and then load the specific content in a popup. I want to load the content of the popup first and then load the application in background. How should I write my application to achieve that.
My suggestion (and I say this as I start to do similar vs. having proven it successful) would be to make some level of framework fairly static so that users get an almost instant response to the site loaded and then start the angular app with something like this
angular.bootstrap(document.getElementById("container"), ["app"])
Ref for the api - https://docs.angularjs.org/api/ng/function/angular.bootstrap
Ref for a demonstration of this - https://egghead.io/lessons/angularjs-angular-bootstrap-app-init
My expectation then is that you will be able to
Load your static elements quickly (which will just have placeholders for your content/material)
Access the data you want in the order you want to get it to present on the screen
Release any other part of the app you need to chrome it up/decorate or populate side items.