Im making an app in html5 and converting it to an apk with phonegap.
For now you only have to alternately push the left div and the right div.
and when you do it your score wil get higher.
The problem is when i press them very fast the score wont change. It will only change upto a certain speed wich is very slow.
leftt = left div, rightt is right div
code:
// JavaScript Document
window.onload = function ()
{
var left= 0;
var right= 1;
var score =0;
var el = document.getElementById("leftt");
var el2 = document.getElementById("rightt");
el.addEventListener("touchstart", function(e) {
if(right ==1)
{
left=1;
right=0;
score++;
document.getElementById("score").innerHTML= score;
}
});
el2.addEventListener("touchstart", function(e) {
if(left ==1)
{
left=0;
right=1;
score++;
document.getElementById("score").innerHTML= score;
}
});
}
You should add the 'user-scalable=no' parameter to your viewport.
This will remove the 300ms delay that some browsers will add to your web application to account to double clicks (The fastclick library will actually turn itself off if it detects this scenario- https://github.com/ftlabs/fastclick).
There is a lot more in depth on this topic on HTML5Rocks - http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
While this article is applicable to Chrome for Android, the user-scalable=no trick has been in Chrome for some time and is in the Android WebView in KitKat.
There is a bug with Android version 4.0.4+ .Try turning off hardware acceleration for your webview with this line of code in your app java file:
super.appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
This may be fixed as of 4.4 (KitKat uses Chromeview rather than webview).
Related
I have an hybrid app developed with ionic 1.x. When the app loads I am forcing the webview to take the focus from native side with the hope that after some initialization request a survey dialog appear and take the focus it self(When dialog appear I am forcing it to take focus). I am trying to make it work with talkback
The problem is that when you load the app from scratch the dialog is not focused so it is not read, after navigate through the app and come back to the original page then in works as expected, looks like as the user is in fact inside the page things works ok.
Is there any workaround or strategy to solve this particular situation?
Thanks in advance
I don't know if it helps you,
but we use it to focus on specific elements in the web view.
it works in android and ios,
but in android, before every element it read webview.
(if you found a solution for it please let me know)
function putFocus(elementForFocus) {
var $element = $(elementForFocus);
var focusInterval = 10; // ms, time between function calls
var focusTotalRepetitions = 10; // number of repetitions
$element.attr('tabindex', '0');
$element.blur();
var focusRepetitions = 0;
var interval = window.setTimeout(function () {
$element.focus();
}, focusInterval);
};
I have been working on a project using PhoneGap and jQuery Mobile. My setup uses multiple pages inside a single html file.
I am facing a problem and I haven't found anything similar anywhere:
When I revisit a page, which means I visited it, then navigated to another page, and now returned to the first page, there is some padding between the header and the content, and also between the footer and the content of the page.
As screenshots show below:
http://i.imgur.com/neBwZYx.png
Below you can see the padding added, red background, when returned to the page above afterwards (this happens with every page)
http://i.imgur.com/u1whW9b.png
The code is very large to post here so if anyone has a suggestion please tell me how to fix this or where to look for the problem.
It should be noted that the problem exists only if the app runs on Android tablets, and not when viewed through the browser on my laptop.
Thank you
You can force correct content height with this function:
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
It must be activated during the pageshow event because only at that point page height is correct:
$(document).on('pageshow', '#index', function(){
$.mobile.activePage.find('.ui-content').height(getRealContentHeight());
});
Working example: http://jsfiddle.net/Gajotres/nVs9J/
If you want to find out more about this function read my other article: https://stackoverflow.com/a/14550417/1848600
I have some jQuery that sets the height and width of various divs.
jQuery(document).ready(function($) {
var h = $(window).height();
var w = $(window).width();
$('.slide') .css({'height': h});
$('.slide') .css({'width': w});
});
This has worked fine until recently i added a script to load userAgent specific css files, one for iPad, Android, and everything else. For some reason the two scripts wont run together. I can have EITHER the correct sized div, OR a multi platform website.
if(navigator.userAgent.match(/iPad/i)) {
document.write("<link type=\"text\/css\" *etc*>");}
else if(navigator.userAgent.match(/android/i)){
document.write("<link type=\"text\/css\" *etc*>");}
else {
document.write("<link type=\"text\/css\" *etc*>");
}
Any reason this last bit of script is stopping the first one from running?
My guess would be the following.
The jQuery.ready() function is called as soon as the dom structure is fully loaded, but before any external stylesheets are loaded. This means that there is a potential race condition between the code loading and applying the stylesheet and the code modifying the css.
You might try to call this fragment in the jQuery.onload().
var h = $(window).height();
var w = $(window).width();
$('.slide') .css({'height': h});
$('.slide') .css({'width': w});
If I load a large html file in a webview running Android 4.0.4 and then press on an input in that webview it works normally. However, when I click a button on the keyboard ("a" or even using voice input) the whole screen goes white and only the input that was initially selected can be seen by the user.
This works perfectly fine in 4.0.3 and 4.1. It only happens in webviews that are longer than the screen (i.e. scrolling required).
I came up with this, after variable trying.
The reason is you do your stuff before input.onblur finishes its work.
So one of the solution is just wrapper your stuff with setTimeout()
here is an example
var ipt = document.createElement('input');
ipt.type = "text";
document.body.appendChild(ipt);
ipt.onkeyup = function(e){
e=e||window.event;
var key = e.keyCode || e.which,
ipt = e.target || e.srcElement;
if(key==13){
ipt.blur();
setTimeout(function(){
//DO YOUR STUFF HERE !!!
}, 100);
}
}
I'm creating a mobile site where I have a video I'd like to play when someone clicks on a link:
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
<script type="text/javascript">
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}
</script>
With the iPhone, this works great, I click on video and it goes full screen. Android works as well but it requires you to click the video to play then click on the full screen. Is it possible to get to the full screen like iPhone just when you hit play?
This should work, with plain Javascript:
var myVideo = document.getElementById('myVideoTag');
myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
// This is for Android Stock.
myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") {
// This is for Chrome.
myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen) != "undefined") {
myVideo.mozRequestFullScreen();
}
You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing.
Tested with the latest version of Android Browser, Chrome, Safari.
I've given up on this. My conclusion is that the html5 video tag on Android devices blows chunks. It works in some devices but not on others. And there is no common criteria like 3.x or 4.x, it just seems to be random. I hope this gets better sometime soon especially since flash support is not longer existent.
Oddly sticking with a simple href seems to be the most consistent. You lose some controls but way better than the video tag...at least so far.
Have you checked out mediaelement.js?
Try something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);
Either that or maybe something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);
webkitEnterFullscreen is the fullscreen method of a VIDEO element that is currently working on iOS. I'm not sure about support on Android devices.
mozRequestFullScreen and webkitRequestFullScreen are implementations of Mozilla and Google's FullScreen API which is used to activate full screen mode on practically any DOM element.
Hopefully that gives you at least a starting point to work from...
Most vendors require user interaction to go full screen, which is why natalee's answer doesn't work. For Andriod, you can call webkitEnterFullScreen() inside your anchor's click handler since it's a valid user interaction:
myvideo[0].webkitEnterFullScreen();
myvideo[0].play();
or
$('#myfileplayer')[0].webkitEnterFullScreen();
$('#myfileplayer')[0].play();
Note how I'm stripping jQuery's wrapper with [0]. It doesn't work otherwise.