fastclick.js JQuery Mobile Phonegap and Android - 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.

Related

Trigger event is not working in touch devices

I've this following JS code, it's working perfectly in the desktop but it's not working in the touch devices.
jQuery(document).ready(function(){
jQuery("#gallery_trigger").click(function () {
jQuery(".my-second-portfolio").trigger( "click");
});
});
From my analysis, I figured that following line of code is not working
jQuery(".my-second-portfolio").trigger( "click");
I understand that .trigger( "click"); is not appropriate for the touch devices, so could you please help me to work this code in all devices?
Try 'tap' or 'vclick'
http://api.jquerymobile.com/tap/
$(".my-second-portfolio").tap();
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.
Classic jQuery syntax:
$(document).ready(function() {
});
To solve this problem (and trust me this is a problem) jQuery Mobile developers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinit event and we can use it like this:
$(document).on('pageinit', function() {
});
To execute a code that will only available to the index page we could use this syntax:
$('#index').on('pageinit', function() {
});
There's also another special jQuery Mobile event and it is called mobileinit.When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind them to mobileinit. One of a good examples of mobileinit usage is turning off ajax page loading, or changing default ajax loader behavior.
$(document).on("mobileinit", function(){
//apply overrides here
});
Or you could use something like this:
$('div:jqmData(url="index.html")').on('pageshow',function(){
// code to execute on that page
//$(this) works as expected - refers the page
});
You could try to use $('.my-second-portfolio')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/

jQuery .on() not working with long dynamic content on Android and css()

I'm trying to bind interactions to dynamically loaded links:
HTML:
<div id="content">
My dynamic content will be here.
</div>
JS:
$(function(){
loadContent();
$('#content').css('height',400);
$('#content').on('click','a',function(){
alert();
});
});
This is working fine on desktop, and with a quite short content on Android.
But it will not work with longer content on Android (with no JS error on Eclipse). Yet, I have not identified any other differences but content length between working and not working pages. Therefore, I tried to artificially limit the length of the content, and then it is working fine.
Do you have any clues of what is happening ?
// EDIT
I updated the code as I had made some basic mistakes when typing this question. This version better reflects the core problem.
// EDIT
I finally managed to isolate what produced a conflict. It is due to a css update of the div after content being loaded. If I artificially remove the height style attribute using Weinre, then the links are clickable again!
I can't see how this is working on desktop at all because the on() call should be inside the DOM ready handler, and the event name should come before the filtering element, like this:
$(function(){
loadContent();
$('#content').on('click', 'a', function(e) {
alert('something');
});
});
First, fix your document ready function to wrap loadContent and on.
Second, If you load content after the page is loaded. you should bind event to the body like this
$(function(){
loadContent();
$('body').on('click', '#content a', function(){
alert('Hello world!');
});
});

Android phonegap - click event is fired on the next screen

I'm using phonegap (cordova 2.8), and android 4.2.1,
I use as frame works: knockout, & jquery mobile.
The app is based on http://propertycross.com/jquery-mobile/
I get the following funny behavior:
when clicking on a button that moves to another screen #2,
if there is a button in #2 screen at the same location,
then it get clicked as well...
The only solution I found is to wrap the code that change the screen with setTimeout:
setTimeout(function() {
application.navigateTo(viewModel);
},600);
This solve the problem but slow down the app...
This is actually unfortunate since the phonegap is already too slow...
Thanks.
There are two things you can do:
1) e.stopPropagation(), e.preventDefault()
phopkins describes this here:
jQuery mobile tap event triggered for twice
I'll elaborate, as this was a major issue for me. This applies to any of the tap, click, vclick and probably other events.
Your event functions should have stopPropogation() and preventDefault() called, like so:
$('#selector').tap(function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
This helps, however, I found that you could still get the "phantom" click.
2) Bind the event to the page, not the button.
That way it's not bound to the next page.
For example, for a page with id='myPage' and a button with id='myBtn':
$('#myPage').on('tap', '#myBtn', function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});

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>

Prevent scrolling in Android browser

Is there a way to prevent scrolling of a rendered HTML page in the Android browser? The following does not appear to have any impact on page scrolling in the Android browser:
var preventDefault = function(e) {
e.preventDefault();
return false;
};
document.addEventListener('touchmove',preventDefault,false);
document.body.addEventListener('touchmove',preventDefault,true);
window.addEventListener('touchmove',preventDefault,true);
(I've tried with bubbling on and off.)
It looks to me like Android Webkit makes the "window" the same length as the document, so scrolling is being done on the browser itself, not on the document body or DOM window object. What's weird is that that's exactly what webkit on iOS does, but the code above still works.
Answering my own question.
The problem ended up being that you need to capture and suppress ontouchstart as well as ontouchmove on document to stop the browser from scrolling. This is definitely different in iOS, but it still works identically on both platforms.
The actual code I ended up using looks sort of like this:
var preventDefault = function(e){
e.preventDefault();
};
var touchstart = function(e) {
document.addEventListener('touchstart', preventDefault,false);
document.addEventListener('touchmove', preventDefault,false);
/*do other stuff*/
};
var touchend = function(e) {
document.removeEventListener('touchstart', preventDefault,false);
document.removeEventListener('touchmove', preventDefault,false);
};
element.addEventListener('touchstart', touchstart, false);
element.addEventListener('touchend', touchend, false);
Not works on Chrome on Android though
But preventing event on window and stopping immediate propagation helps!
Handler should be not passive to do that.
MAY BE adding an event handler on capturing phase would help too
But this snippet below is tested by me
window.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
}, { passive: false });
DEMO https://codepen.io/ColCh/full/qvLqoe

Categories

Resources