crosswalk-project android full screen - javascript

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");
});
}

Related

Full screen textbox on focus

How can I get a full screen text box using only js, jquery or css ?
Most phones have this thing when the textbox goes full screen and you can see the textbox only.
I looked this up but found some solutions only at app level. I'm doing this at an webpage so not possible to make app changes.
And the textbox is inside a popover and hence changing its width and height won't work.
So is there anyway to achieve this using normal web components ??
You could try using the HTML5 Fullscreen API, the tutorial I linked works with videos but the same idea can be used for any element I guess. It is experimental but supported on webkit and moz. Heres the link:
MDN Fullscreen HTML5 API
As a footnote, I would have added this as a comment but my reputation isnt high enough yet, so just posted here.
are looking for something like this(jsfiddle)?
<textarea id="fill-screen"></textarea>
jQuery
$(function(){
$('#fill-screen').focus(function(){
$('#fill-screen').css({'height': window.innerHeight,
'width':window.innerWidth});
})
});

forcing focus after page load ~unique

Info:
Screen Readers: Jaws 14, Apple Voiceover
Browsers: IE, Chrome, Firefox
So I have a web flow that I'm trying to make accessible via screen reader. Now it is composed of multiple vms. In the header there is a skip to main content so user can skip the redundant header that shows up on each page of the flow. My issue is the main body of the page gets ignored by the screen reader. I was able to use the following code to bring attention to the content and the screen reader will read from there.
<script language="javascript">
function reload() {
window.location.href = "#page1";
}
</script>
then a tag to use as a anchor as follows:
<a name="page1" id ="page1></a>
This works great and all BUT now it skips over the header of the page.
So my question would be, is there a way to make focus to go back to the top of the page or a better way to force that content to be loaded to the screen reader will read it in a linear fashion?
I only have this problem in IE (yep who would of expected that). Voiceover and Jaws 14 has no problems in any other browsers.
Hopefully this description is clear, if not I can try to elaborate more if needed.
Thanks for your time, its greatly appreciated!
It sounds like you are updating content, inferred by the main body being ignored, in which case you might want to check out live regions https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions to communicate the update.
If main text is failing to voice when following the skip link without a dynamic update please post the HTML.

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

How to show Loading Screen in Browser with Sencha Touch 2

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

iPad safari don't show loaded images until slide the screen

i have a problem in iPad Safari. when i use Javascript to append image to div using elm.appendChild(img) the images don't appear until the screen is touched. the same code works perfect on IE,Firefox,Chrome,and android browsers.
i have uploaded video that shows the problem. http://www.youtube.com/watch?v=nBN9fThDik8
is it related to the device ? or there some special code for loading images in iPad safari?
or any solution ?
iPad (more so than iPhone as far as I've experienced, although that's just a gut feeling) is notorious for avoiding loading and rendering large resources unless it decides the user is going to see them.
How about faking the user input required to trigger the render, ie the scroll, after appending the image? Sample code here, may work:
function scroll(){
var body = document.body;
var xy = [body.scrollLeft, body.scrollTop];
window.scrollTo(xy[0],xy[1]+1);
window.scrollTo(xy[0],xy[1]);
};
To be called immediately afterwards, eg:
appendImg();
scroll();

Categories

Resources