Android fastclick issue - javascript

I have two different pages with a clickable element
located on the same position. On the first page there is
a menu button which will open up if a user clicks on it and
on the second one, in the exact same position there is a back
button which will redirect the user to the first page.
Now to the problem; whenever a user clicks the back
button on the second page he will be redirected to the
first page which is intended, but it will also open
up the menu automatically which it shouldn't do.
I am building an app with PhoneGap where i am utilizing
the fastclick library in order to eliminate the 300ms click
delay. If the fastclick library isn't used, the
application works as expected but then it wont feel as responsive.
The fastclick library works perfectly under iOS environment.
What could be causing this undesirable effect?

I think the problem is more because the click on loaded on a mouse event and not a touch event that you are experiencing this issue. Can you try loading the event handler on a touch event instead ?

Related

Iphone - Safari - detect swipe navigation

I'm having a bit of a problem with mobile safari's swipe animation:
I've created a popup window of sorts, for the search functionality (with a similar purpose and look to ebay's mobile site. Go to ebay on mobile, and focus on the search field and it will overlay a sort of popup over the entire site)
The difference, however, is that I've added a pushstate command so that when you open the search popup, it advances the browser history. That way, if a user wants hits "back" on the browser, it'll just close the popup instead of going to whatever previous page the user came from.
Another thing is that I've created an animation for the window's appearance and disappearance. So when you focus on the search field, the popup appears by sliding from right to left, and also goes away in a similar fashion.
Here's the problem, though: iPhone's swiping navigation functionality destroys the sliding effect -
when you open the popup, it advances you forward in the browser's history. Now, if you try to go back by using the swiping functionality, it shows the sliding animation of the previous page into view (iPhone's default), but then, as it's done, my code kicks in (because ultimately, it triggers the popstate event) and also does the sliding animation, so it looks broken. So, as a result, the way it looks is: you swipe to go back to the previous page which shows the search popup being pushed out of the view (just like my animation), and then when you're done, boom, the animation reappears, and plays again.
Ideally, I'd like to be able to detect the swipe functionality somehow. That is, some event, or something in the popstate event to indicate that a swipe navigation is, or has just occurred?
Or perhaps, being able to disable safari's default effect? (to which the answer, I suspect, is a big fat NO)
Is there anything I could do about any of that stuff short of disabling my custom animation when I detect safari, or doing away with the pushstate functionality?
Any advice towards a solution would be highly appreciated.

Using jquery to capture click event on <li> element not working on iPad

On this page:
http://www.jwallacellc.com/fabric.htm
If you click any of the numbered blocks on a computer, a pop-up appears.
If you click them on an iPad, the hover state appears, then clicking a second time makes the pop-up appear.
I want the pop-up to appear on the first click on iPad.
Curiously, almost the exact same thing happens on this website's home page, but in that case the first click opens the pop-up without a problem:
http://www.jwallacellc.com
I don't understand why they are reacting differently. In both cases, the hover state is handled by CSS:
ul#home li:hover h2{height:160px;}
ul.interior li:hover h2{display:block;}
The clicks are handled by jQuery/Javascript:
$('#home li').click(function(){…});
$('ul.interior li').click(function(){…});
Is there some difference in my selectors that is causing iPad to not capture the click event the first time, on my interior page, but not the home page? Does iPad think because there is a hover state, it should show that the first time? But why would Javascript ignore the click event in that case? And in any event, my two pages are functioning differently for some reason.
Would appreciate any advice. Thank you!
iOS require an href="#" parameter on links
In my experience, this is just one of the differences between desktop and iPad web development. The iPad is listening for touch events, but can still handle click events (somewhat). The first touch is always a hover and the second a click, when you're listening for clicks.
You can get around this by listening for touch events using something like Zepto.js instead of jQuery, or a jQuery plugin for touch events, instead of listening to click events.
Or if you like, you can manually setup touch events with a tutorial like this.
I'm not sure why one of the pages actually works on the first touch, I've never been able to accomplish that with a click handler.

phonegap back button requires 2 taps

I am using PhoneGap 2.9 on a Galaxy S3 Android 4.2.1 to develop an application. In the application i have overridden the default back button behavior. The back behavior is simply a call to :
window.history.back();
I have 4 html pages. After navigating all the way to page4.html, I hit the back button and successfully navigate to page3.html. On page3.html I must hit the back button twice in order to successfully navigate to page2.html. It seems to behave this way regardless of the navigation plot. The first "back" works fine, all subsequent ones require a double tap of the back button.
Stangely, when I put an alert("going back!") just before the call to window.history.back(),it displays properly for every "back" tap in the navigation. What could be causing this?
I'm not exactly sure how you are calling window.history.back() but you could do something like this:
$("#backButton").bind("click", backClicked);
function backClicked(){
window.history.back();
}
and I highly recommend incorporating the fastclick.js library to any project that you want responsive buttons.

Bootstrap modal showing then disappearing right away only in BB10?

First things first: I'm not including the modal plugin twice as is the culprit on most similar questions - this issue only affect BB10 as far as I can tell - so that's clearly not the case.
As I said, in BB10, the modal is opening then disappearing right away. If you scroll the page a little bit then it opens and stays open, but this is intermittent and only works at certain scroll points...
2 questions:
Do you know what the issue is?
Is there a way to debug BB10 browser like the 'inspect element' through safari that iOS has.
Here is the site: http://www.thomasdexter.me/intravillage/
And some videos of the issue and the scrolling thing:
https://dl.dropboxusercontent.com/u/13675289/Video%20(1).MOV
https://dl.dropboxusercontent.com/u/13675289/Video.MOV
Edit: to get a popup click the 'sign in' link in the fixed menu bar or sign up now on the introduction slide/page
I've determined the underlying cause of the problem - it is a blackberry issue - and I've got a workaround that works but does not fix the blackberry issue that causes it.
I was able to deduce what's happening is that the blackberry is registering 2 touches instead of 1 for some reason. The first touch opened the popup and the second touch, if the button/touchpoint was in the same pixel area as either the 'close' button or the translucent black underlay that also closes on click, would register as a click on the button/underlay and close the popup right away. That is also why it was happening intermittently, if the button to open the popup was in the area of actual popup then it wouldn't close because the second click registers in a non 'closing' area.
TL;DR: It's a blackberry issue that they need to fix.
The solution was to disable the 'click to close backdrop' via 'data-backdrop="static"' only on blackberry.
I used the following in JS:
In the section where I check for supported stuff and add classes I have this:
if(/BB10/i.test(navigator.userAgent)) {
//BB10 Device
$('html').addClass('bbten');
}
Later on just before I register the click events to activate the modals, I have this to add the static (not click to closeable) backdrop if it's BB10 (3 different modals #contact, #signin and #signup):
//bb10 double click issue
$('html.bbten #contact, html.bbten #signin, html.bbten #signup').attr('data-backdrop','static');

itemtap event not firing on all taps

I'm using Sencha Touch 2.1. I have Ext.carousel.Carousel container and bunch of Ext.dataview.Dataview as pages inside carousel.
On each dataview I have a lot of buttons (rendered using CSS - so they are not buttons controls but simple divs with fancy styles). I'm trying to catch itemtap event when user taps on the "button".
Everything works fine in browser on the desktop. On the iPad however touch sensitivity is different and often I will not get itemtap event when user not carefully and somewhat slowly taps on the button. Carousel would start moving slightly as in swipe event was detected and carousel needs to change pages.
I tried to replace itemtap and use itemtouchstart instead. Button responsiveness got significantly better, but I often see false positives when user legitimately swipes between pages.
I'm stuck. I want to have responsive buttons and also swipe across to change pages.
Anybody seen something similar? Or solve it somehow?
This is a known issue check out this forum post in sencha forum. Tragically i have the same issue & at the moment it cannot be solved using sencha alone perhaps a solution is available in phonegap but i dont know.

Categories