I have the following setup (view in a narrow window, <750px wide): http://codepen.io/darrylhein/pen/oFalc
The problem is that the hide/show of the navigation doesn't work in Android's default browser. It seems to work pretty much everywhere else. (It does work in Firefox on Android.)
Basically I'm using input:checked ~ .class { height: 16em; } to show the nav.
I've tried removing the transition and a variety of other things and it doesn't seem to work.
Any ideas?
I'd like to avoid using JS, but if I have to I will.
So, 2 parts to the solution:
1) The problem occurs on Android <4.1.2. The solution is to add a fake animation on the body:
body { -webkit-animation: bugfix infinite 1s; }
#-webkit-keyframes bugfix {
from { padding:0; }
to { padding:0; }
}
2) There is also a problem on iOS <6 where labels do not check checkbox. The solution is to add an onclick to the label:
<label for="checkbox" onclick>Menu</label>
I found the solutions here: http://timpietrusky.com/advanced-checkbox-hack
I've also updated the codepen: http://codepen.io/darrylhein/pen/oFalc
Related
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.
I'm writing a KendoUI Mobile app for Android.
I add these style rules to put the navbar at the top of the screen.
/* visulaizza il titolo nella navbar */
.km-android .km-navbar .km-view-title {
visibility: visible;
}
/* navbar in alto */
.km-android .km-view {
-webkit-flex-direction: column;
}
Those work well when all run in browser preview but, after the app was build, on the device the navbar appears at the bottom.
Can someone help me?
Thanks!
Your rule are incomplete. Use that:
.km-root .km-android .km-view {
-webkit-box-direction: normal;
-webkit-flex-direction: column;
}
You can watch other style tricks from this link
http://docs.kendoui.com/getting-started/mobile/application
Where do you place these CSS rules? Seems they don't get included in the build for some reason.
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.
I can't seem to get the translate property or -webkit-transform working on Android browser correctly, despite success in iOS and every desktop browser.
My 'full' solution is a small jQuery function like this:
$.fn.transition = function (properties, options) {
var $element = $(this);
options = $.extend({}, cssDefaults, options);
properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing;
$element.css(properties);
return this;
};
which is called like this:
$element.css("transform","translate(1000px,0px)");
I've read in some places that Android has broken support for multiple css3 actions at the same time; however even when I replace all of this code with this simple dummy call the transform never happens:
$element.css("-webkit-transform","translate(1000px,0px)");
Am I doing something wrong that is specific to android?
I have just ran into this with
-webkit-transform: translate3d(0,200px,0);
So I am hoping this will help you. I believe this is one of the 'broken' css3 elements in the Android Browser.
I had to sub out the above code with top: 200px;
In your situation, I would try using a simple left such as left: 1000px;
remember your position statement if you need more accurate control
I'd like to be able to mimic the behavior of the :active pseudo class on all elements in Android webkit. Currently, the :active syntax only works on a elements (links). Nearly all of the actionable elements in the app I'm working on are something other than a standard link tag. iOS webkit supports :active on all elements.
/* works on both android iOS webkit */
a:active {
color: blue;
}
/* works on iOS webkit, does not work on android webkit */
div:active {
color: red;
}
I've found a couple of resources [1,2] that solve similar problems, but they're both a bit heavy, and I'm wondering if there's a lighter weight solution that I'm just not able to find.
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
http://code.google.com/intl/ro-RO/mobile/articles/fast_buttons.html
Based on what #caffein said, here's a full implementation of this:
For all :active code, write CSS rules that look like this.
my-button:active, .my-button.fake-active {
background-color: blue;
}
Then in your document ready event add this code:
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$(".my-button")
.bind("touchstart", function () {
$(this).addClass("fake-active");
})
.bind("touchend", function() {
$(this).removeClass("fake-active");
});
}
This has the advantage of using the fast native :active class on iOS, and dropping back to JavaScript on Android.
Taken from my blog at http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html
EDIT: I've since discovered that buttons can occasionally 'stick' in the fake-active state. The fix for this is to also handle the touchcancel event. E.g. add this to the above..
.bind("touchcancel",
function() {
var $this = $(this);
$this.removeClass("fake-active");
});
If you don't want to use any script, which adds and removes class for active state of an element, just add empty touchstart event to the body tag:
<body ontouchstart="">
This will tell the android device to handle touch events and pseudo class :active will work correctly on all elements.
No-jQuery version based on Ben Clayton's solution.
EDIT: added "touchmove" event.
function hasClass(ele,cls) {
return ele.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp("(\\s|^)"+cls+"(\\s|$)");
ele.className=ele.className.replace(reg," ");
}
}
window.onload = function() {
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
var elements = document.getElementsByClassName("my-button");
for(var i = 0; i < elements.length; i++) {
var elm = elements[i];
elm.addEventListener("touchstart", function() {
addClass(this, "fake-active");}, false);
elm.addEventListener("touchmove", function() {
removeClass(this, "fake-active");}, false);
elm.addEventListener("touchend", function() {
removeClass(this, "fake-active");}, false);
elm.addEventListener("touchcancel", function() {
removeClass(this, "fake-active");}, false);
}
}
}
The ":active " pseudo class is triggered when you actually click or press an element.
A workaround for smartphones is to use the Javascript events: "ontouchstart" & "ontouchend".
Try using ontouchstart to modify the style and ontouchend to actually trigger the action.
Since I can't comment, I'm going to add another answer here.
Nadzeya suggested the following solution:
<body ontouchstart="">
This does work as described, but I believe it may also have an unintended consequence.
There has been a problem on our site where buttons would occasionally stop working. In fact, the button would change colors (as if it was pressed) but the click event wouldn't fire. Even submit buttons on forms would fail to submit the form (no Javascript involved), even after appearing pressed.
Today, I saw the problem again. On a whim, I removed this attribute and the problem went away. I then added it again and the problem came back.
Since I can't reproduce the problem reliably, I can't be certain that this was the cause, but for now I'm going to leave the tag off and solve the :active problem another way.
try this. It works for me perfectly on Android
.my-button {
-webkit-tap-highlight-color: blue;
}
Trying add this code to your HTML:
<script>
document.body.addEventlistener('touchstart',function(){},false);
</script>
I got an easy alternate solution. This however requires you to change from div tag to a tag.
<a class="html5logo" href="javascript:void(0);" ontouchstart="return true;"></a>
.html5logo {
display: block;
width: 128px;
height: 128px;
background: url(/img/html5-badge-128.png) no-repeat;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
-webkit-transform: scale3d(0.9, 0.9, 1);
}
Please find the source at phone gap tutorial
you just need put this code in your document:
<script type="application/x-javascript">document.addEventListener('touchmove', function(e){e.preventDefault();}, false);</script>