How to show Loading Screen in Browser with Sencha Touch 2 - 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);

Related

Ionic transition animation stuck/lag on android devices

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.

How can I use JavaScript/JQuery to resize the HTML of my page responsively?

Click here to view my example.
I am attempting to use this code in my simple website to responsively resize the HTML of the page, even as you resize your window.
Is this not possible or am I just making a simple error? The website was designed for 1360x768 (my resolution), however this code makes it look extremely wonky, and no scroll-bar is shown (unsure why).
The code to resize/scale:
function scalePage(){
document.getElementsByTagName("*").each(function(){
var width = ($(this).width() ) / 1360;
var height = ($(this).height()) / 768;
$(this).css("transform", "scale("+width+","+height+")");
$(this).css("-moz-transform", "scale("+width+","+height+")");
$(this).css("-webkit-transform", "scale("+width+","+height+")");
$(this).css("-o-transform", "scale("+width+","+height+")");
});
}
$(document).ready(function() {
scalePage();
});
$(window).resize(function() {
scalePage();
});
Resizing your page using JS is a bad idea from the get go.
Here's why:
What if your user has JS disabled?
What if your user has an older browser that can't render the JS quick enough?
Each time you resize your browser the content must be re-rendered.
Javascript should be used to add features to the site, not create them.
Secondly,
This approach is not 'responsive'. To achieve a responsive layout on your site you should use CSS to control it, As it is much faster than Javascipt/ jQuery.
A good starting point for creating responsive web pages would be this article: 2014 Guide to Responsive Web Design. Any seasoned front-end web developer will tell you that the key to a good responsive website is to develop mobile first. This will ensure that your site will 'scale' nicely.
Thirdly,
I am going to re-iterate my point about javascript being used to add functionality, More and more do i see sites failing when i have javascript disabled or i browse on an older laptop with IE8 installed. (Although there are arguments against supporting IE8 nowadays.)

crosswalk-project android full screen

In my html5 game, I have a login field and therefore when the user enter the text fields(username and password), the android keyboard pop up along with the onscreen soft keys(where back button and menu button is present).
While building my app with crosswalk, I set the display to fullscreen in the manifest and it is working fine except for this login screen bringing back the soft buttons. I have no knowledge of native android coding and is wondering if the buttons can be hidden again through API calls from the javascript.
The scaling of the html is done through meta viewport in the html and the game behaves like that of a browser.
var scale = screen.availWidth/1024;
var vp = document.querySelector("meta[name='viewport']");
vp.setAttribute("content","width=device-width, user-scalable=no, initial-scale="+scale);
I did tried my canvas to request full screen and it works but the size of the canvas is not taking the whole screen and it looks bad again.
Any suggestions on how I should proceed or which article I should be reading or direct solution?
Also, if you need any more information or code, let me know. Thanks!
I've had similar problem.
You can make it fullscreen again by requesting it from your JavaScript code. You can use screenfull.js library:
if (screenfull.enabled) {
screenfull.request();
}
This was to complicated for my project, so I ended up not using fullscreen mode, but I've added new attribute in my Crosswalk/template/AndroidManifest.xml file:
android:windowSoftInputMode="adjustPan"
This way, my app will not shrink when soft keyboard pops-up.
I solved a similar issue using cordova-plugin-fullscreen and the following code:
if (typeof(AndroidFullScreen) != 'undefined') {
console.info("AndroidFullScreen is defined");
AndroidFullScreen.immersiveMode(
function(){
console.info("AndroidFullScreen.immersiveMode success");
}, function(){
console.info("AndroidFullScreen.immersiveMode error");
});
}

Turbolinks: what is the Rails 4 way of showing progress for slow pages?

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

AppGyver - phonegap remove loading transition screen

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).

Categories

Resources