Hello I'm creating a simple mobile app using Appgyver - steroids.
I'm new with this framework I'm trying to find a way to hide the loading screen between different pages in both Android and iOS. I have read their documentation but I can't make it work.
Based on this: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.layers_layers.push.md.html#steroids.layers.push
I 've set keepLoading: false on a view push which didnt work
also after the view push I called:
steroids.view.removeLoading();
as mentioned here: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.view_view.removeLoading.md.html#steroids.view.removeLoading
Nothing removed the black loading transition screen between pages.
Could someone please tell me what I'm doing wrong?
It could be documented better, but if you remove/rename the www/loading.html (for iOS) and www/loading.png (for Android) files in your project, then steroids.layers.push() will not show the loading screen (also means that the push animation will not start until after the WebView has loaded, which can take some time and lead to unresponsive feeling).
Related
I am using ionic to develop web app. In the app, after logging in, it redirects to a page containing ion-slides, but the transition is not smooth, it will stuck with a part of former page(the logging in page) still in screen, when I click the screen(maybe focus??) , the transition can be completed and the latter page will be in the screen totally.
<ion-content scroll="false" class="myevents-content" ng-show="isCardViewer" ng-animate="'animate'">
<ion-slides options="options" slider="$parent.slider" class="myevents-content-slider">
So is the problem related to the animation?? And any idea to solve it?
THX.
The best way to solve transition animation is to use this plugin
cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5
https://github.com/shprink/ionic-native-transitions
Do not forget to add all the JS file after you install the plugin in yor index.html. It will work on on devices.
I'm working on getting a slideshow mobile friendly, but am running into a problem. I'm pretty sure it's javascript related because pages without the slideshow load fine. The site has a lot of images all categorized in the NextGen Gallery plugin, so I installed a slideshow plugin that would work with the existing setup.
It works fine on desktop without any console errors, but when it's loaded on my phone I get an error stating, "A problem occurred with this webpage so it was reloaded." It tries a few more times, then gives up.
I've never run into this with anything I've ever made, so I'm not sure where to start to try and fix it since I don't have any errors to go off of. Is there a way to fix this? Or is there a similar plugin that can integrate with NextGen Gallery as well?
An example can be seen here: example slideshow
Slideshow plugin: NextGen Galleryview
This question might sound similar to Rails turbolinks long request doesn't show page load.
I've recently started new Rails 4 application, which uses Turbolinks library by default - it is awesome: makes the application feel faster/snappier, however I do have some pages that are slower than others.
Unfortunately I can't find a good way to make a browser show the default loading indicator - just like it does when it loads "conventional" web pages. People recommend different JavaScript solutions, for example, https://github.com/caarlos0/turbolinks_transitions. Although some do look good, but "average internet user" is not used to seeing loading progress somewhere other than the default browser's loading indicator.
How can I make Chrome show that "spinning semi-circle" in the tab header?
Or how can I make Safari show that "moving blue wave" in the address bar?
Etc.
Most of my pages are fast though, so I'd like to show this loading indicator for the pages that won't load within 300 ms, for example.
Thank you!
Alex.
While this isn't exactly what you want, you can change the cursor to be the loading cursor using javascript like this.
$('selector').css( 'cursor', 'wait' );
It would definitely let users know that a page is loading. You can set/remove it with more javascript
Disclaimer: I know how to create a startup screen on mobile devices.
Is it possible to show a loading screen for a Sencha Touch 2 application if accessed via the browser?
If yes, please give a concise, working example. Proof-of-concept app, Gist, source, you know.
I am talking about something like the Sencha Docs loading screen:
You can add a loading indicator to your index.html. Just make sure it loads fast so the user gets an instant feedback that something is going on.
<div id="appLoadingIndicator"></div>
Once the app launches call
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
This is done for you in case you use Sencha Cmd to generate new applications.
Also have a look at these smooth CSS3 indicators for inspiration.
yourContainer.setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
then add a timer
setTimeout(function() {
// code to be executed when loading
// Unmask the container
form.setMasked(false);
}, 5000);
I have built an game using HTML and javascript that I want to turn into an ipad app.
I have been following this "Creating a native 'Objective-C' app" section of this guide: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
However, when I run the ipad simulator in Xcode, the "ipad" comes up, but it just shows a blank screen.
I took out all my code in my html file and just put in a couple of lines of html. When I change the background color, this does show in the ipad simulator.
However no text shows up.
Does anyone know what I'm missing?
I am using Xcode 3. Also, I have already taken my javascript file out of "compile sources" and placed it into "copy bundle resource".
I don't know about your problem but an easy way to create an HTML/JS app is to use PhoneGap. Plus you can bring your app to other OS like Android an a PhoneGap project is really easy to set up.
http://phonegap.com/start