rel="external" and white flickering (phonegap + jquery mobile) - android

I know there are questions on this issue, but I tried everything and do not fix my mistake! X__X
I have a mobile application (astronomical) for Android and when I use to load another html, in the transition makes a white flash that I can't remove (I tried removing the transitions "slide" to use and nothing, background: # 000000! important, etc. ..). I use jQuery mobile 1.3.1 and Phonegap 2.9.0.
I'll share a video where you can see better the problem: http://www.youtube.com/watch?v=ykjCN03nOCM
Any help??
Regards,
Daniela.

CSS :
.ui-page {
-webkit-backface-visibility: hidden;
}
Code :
The CSS solution from this thread didn't work for me (Android 2.x).
I disabled the transistion with data-transition="none" in all links and everything was ok. It should also work when set on page-level, but it didn't work for me (jQuery Mobile 1.0). This is the code:
// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
$("a").attr("data-transition", "none");
}
Another (the better) way would be to set the default transitions for jQuery Mobile:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
iPhone performs the transitions hardware-accelerated, while the other platforms perform it per software. This explains why only iPhone performs smooth transitions.

Try this one here: here
Maybe your transitions will be more smoothly then.

Related

fastclick.js JQuery Mobile Phonegap and Android

I can't get all of these to work together. I have phonegap/JQM running with fastclick.js perfectly on iOS. It's a dream. But for some reason I still get a 300ms delay on android. I put some alerts in and the code is being called. It's baffling really. I am testing on a motorola droid razor maxx.
In my index.html file:
<!DOCTYPE html>
<html>
<head>
...
<script type='application/javascript' src='js/fastclick.js'></script>
</head>
<script>
$(document).on("pagebeforechange", function (e, data) {
FastClick.attach(document.body);
alert('fastclick attached');
var to_page = data.toPage[0].id;
// skip showing #myPage if condition is true
if (to_page == "index") {
$.mobile.pageContainer.pagecontainer('change', 'event-list.html');
e.preventDefault();
}
});
</script>
<body>
<div id="index" data-role="page">
This is the index page.
</div>
</body>
</html>
But it doesn't seem to work. I've also tried attaching it like:
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
Which both work on iOS but don't seem to have any effect on android. Any suggestions?
edit: It seems if I remove the JQuery libraries it works fine. There has got to be a conflict somewhere. Any idea what it may be? I am using JQM 1.4.
edit: I have also tried using vclick to no avail
$("#test-element").bind('vclick',function() {
$.mobile.pageContainer.pagecontainer('change', 'description.html?lunch_pk=2133',{
transition: "slide",
});
});
...
<h1 id='test-element'> CLICK HERE FOR TEST </h1>
I am also using gestures to change pages which are also being delayed by 300ms, so I don't think that even if vclick was working that it would be a complete solution.
edit: ok, so after some further testing, I am pretty sure the delay is coming from inside JQM pagechange functions. I did a console.log inside the vclick and I the log is pretty responsive when hitting the button. I am trying to dig through JQM but not being very successful, I mean why would it be seemless on iOS and not work on android? And maybe I just need to find a better mobile library.
Answer
I was never able to solve this problem. My solution was to switch libraries. I went to Intel's mobile app framework which was able to do everything I was doing with JQM only more successfully.
You can try vclick without trying onclicks. These built-in jQuery Mobile vclick omits the 300ms delay. I do this by doing this.
$("#element").bind('vclick',function(event) {
yourFunction(this.id);
event.preventDefault();// this prevents the default click event
});
Have you tried opening jQueryMobile library file? There are some functions like:
setTimeout(function() {
$link.removeClass( $.mobile.activeBtnClass );
}, 300 );
I am sure, that searching this file for "delay" or "timeout" and changing it would give a good result. Line above is from
.mobile.popup.handleLink = function( $link ) {
...
}
Try registering FastClick inside the deviceready event handler:
document.addEventListener('deviceready', function() {
FastClick.attach(document.body);
}, false);
Have you tryed to juse the tap event?
$("#test-element").off('tap').on('tap', function(event) {...do your stuff});
Note that .bind is deprecated - better use on / off
Note that depending upon, where you're attaching your eventhandler the eventhandler might get bound multiple times on pagechange and revisit.
You best bind your tap-event-handler in ther pageinit event in order to make sure, that you attaching to the event only once and not every time, you revisit a certain page.
In case you're attaching on pageshow use the "off" first (see above)
I had the same problem with some menu buttons. My solution works for all platforms without a helper library, however, I wish there was a better way like setting a JQM variable:
$('#button').unbind('touchstart click').bind('touchstart click', function(event) {
$('#button').addClass('ui-btn-active');
//doSomethingHere();
setTimeout(function() {
$('#button').removeClass('ui-btn-active');
}, 300); //this 300ms is just the delay for styling the button
event.preventDefault(); //if touchstart is supported, do not let the event propagate to the click handler. Having this here avoids a double trigger.
});
The key is binding to touchstart which triggers immediately.
NOTE- I have this code within a pageshow handler which is why I unbind and then bind it. Otherwise, you'd end up with the same event bound multiple times as the user navigates to and from this page.
There are durations associated with the page transition animations in JQM. Here is some of the CSS for the default 'fade' transition (from jquery.mobile.structure.css v1.4.2):
.fade.out {
opacity: 0;
-webkit-animation-duration: 125ms;
-webkit-animation-name: fadeout;
-moz-animation-duration: 125ms;
-moz-animation-name: fadeout;
animation-duration: 125ms;
animation-name: fadeout;
}
.fade.in {
opacity: 1;
-webkit-animation-duration: 225ms;
-webkit-animation-name: fadein;
-moz-animation-duration: 225ms;
-moz-animation-name: fadein;
animation-duration: 225ms;
animation-name: fadein;
}
JQM changes classes on the to and from pages when transitions start and complete, so in the case of the 'fade' transition, the page being changed to will become the active page 225ms after the from page has completed fading out (125ms) i.e. after 350ms.
You could try disabling the transition by specifying {transition: 'none'} in your call to $.mobile.pageContainer.pagecontainer('change' or by setting $.mobile.defaultPageTransition = "none"; in your mobileinit event handler to rule it as the cause of the delay.
I've always disabled page transitions in my Phonegap JQM apps because of the poor performance and flickering (Android), but I still have responsiveness issues, especially on Android. I think it is down to how the webview prioritises rendering the DOM. I've found that a strategically positioned setTimeout can make page changes seem more responsive by allowing the webview to postpone my application logic until after it has rendered the DOM.

Force Orientation on certain pages

I'm developing a PhoneGap + JSmobile + html5 app for iOS and Android. I'd like to force the landscape orientation for same pages. I'm trying to find a solution but I can't do it.
Is it possible at all?
I found a post where someone says to use a trick in CSS to rotate the #div:
#ID {
-webkit-transform:rotate(90deg); /* Safari and Chrome */
}
this trick rotates the page but it is rendered with with a border on the left and right side.
i found a solution:
$(document).on('pagebeforeshow', '#ID',function() {
setTimeout(function() {
$('head').append( '<meta name="viewport" content="width=device-height, height=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">' );
}, 200);
});
the timeout is to prevent strange change in the prev page ;)

HTML5 video full screen on mobile browsers (android)

After a huge research I didn't find any answer to my question yet. I wanted to achieve my goal with FullScreenAPI but it is not supported in any mobile browser (except Firefox 19 and Blackberry browser - but I need a cross-browser solution). Here's the source. I also tested FullScreenAPI on native android browser and mobile Chrome with appropriately prefixed fullscreen functions. Each function was of type undefined.
Another approach was the rtsp protocol which is usually handled by an outer player. Here is the guy who assumes that m.youtube.com uses that solution - I think it is not true (maybe the answer is outdated). Youtube uses native video's fullscreen. On mobile Chrome when you tap the play button, the movie instantly goes fullscreen.
Although, every source I googled tells me that native fullscreen is not possible on android browsers, still HTML5 video element with its native controls gives us a fullscreen button which works perfectly out there.
Since I don't want the native controls, can anyone share any ingenious solution to How to trigger HTML5 video fullscreen button'sevent?
You can make a popup at 100% width/height with a close button on absolute on it playing your HTML5 video.
Old, simple and dirty trick... But works
all you need to work on "webkitbeginfullscreen" and "webkitendfullscreen" events for mobile devices, i think.it will
<!doctype html>
<html>
<head>
<title>video</title>
<script type="text/javascript">
function videoControl() {
var myVideo = document.getElementById('myVideo');
myVideo.addEventListener("webkitbeginfullscreen", enteringFullscreen, false);
myVideo.addEventListener("webkitendfullscreen", exitingFullscreen, false);
}
function enteringFullscreen() {
alert("entering full-screen mode");
}
function exitingFullscreen() {
alert("exiting full-screen mode");
}
</script>
</head>
<body onload="videoControl()">
<div id="videoContainer">
<video id="myVideo" src="myVideo.m4v" autoplay controls>
</video>
</div>
</body>
</html>
Try video.webkitEnterFullscreen() in a user interactive event handler(ex: click)
Most people facing this issue is because the HTML5 video is implemented inside <iframe>.
Add the three attributes in iframe to enable fullscreen in adroid chrome
<iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
Here's what I use that should pretty much work everywhere:
function toggleFullScreen() {
var doc = window.document;
var elem = doc.body; //the element you want to make fullscreen
var requestFullScreen = elem.requestFullscreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen|| doc.msExitFullscreen;
if(!(doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement)) {
requestFullScreen.call(doc.body);
}
else {
cancelFullScreen.call(doc);
}
}

Jquery Mobile on android link transition double blink

Im having a problem with Jquery Mobile after compiling it with Phonegap.
Here is a code snippet:
function game() {
$.mobile.changePage( "#game", { transition: "slideup"} );
}
Page 1:
<a onclick="game()" data-role="button">Start game</a>
Page2:
<div data-role="page" id="game" data-theme="a">
...
</div>
When i click the link "Start Game" it sure does change the page, but it double blinks. This looks very bad, and im trying to get rid of it. I like the transision slideup, but i just want the page to change without it looking like its double changing.
Anyone able to help? :)
Phonegap problem with blinking on android is due the poorly performing platforms like Android version 2.x. I advise you to turn them off on that android versions. There are some possible css fixes but I never managed to include them properly in my code.
Transitions can be turned off like this:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
More about android phones problem can be found here: http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/
After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.
Solution found, thanks to Gajotres.
I found that i had to include the transition disable script before jquery mobile, which in terms are a bit weird. It would be more logical to include it after, however it works now, and im happy :)
The solution:
<script src="js/disableTransition.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

html5 video tag to play full screen with Android

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.

Categories

Resources