I'm using the idangerous "Swiper" slider. One of my slides has a textarea in it that is causing issues. Everything is OK on the desktop, but on mobile when entering text in the textarea, Swiper seems to reinitialize and return to the first slide.
As this happens on mobile only, I am guessing it is related to one of the touch events firing in the text area.
As suggested in another post I have applied:
$('textarea#text_area_name').on('touchstart mousedown', function(e){
e.stopPropagation()
})
This didn't solve the problem, so I extended it to include all touch events. And then all parents (until the swiper wrapper). Still with no success.
I have tried using alerts to show which touch events are firing. But I can't see the event that is fired immediately before the before swiper resets.
Does anyone have any experience of using a textarea within the idangerous swiper slider? Or any ideas on what event may be causing the issue and how to prevent it?
Sometimes when you write the question down the answer becomes clearer...
I was reinitializing Swiper on window.resize to manage the dynamic sizing. The resize event was getting triggered by the textarea on mobile devices. Maybe this is due to the soft keyboard popping up. Anyway, removing the reinitialize on resize solved the problem.
Related
I have a DataTable which has 100 rows and I'm setting it with lists.
Dynamically I change the lists with selected name from a drop down.
I do it with
$("#datatable").remove();
this.datatable = new Autodesk.Viewing.UI.DataTable(this.panel);
this.datatable.setData(datalist,titleList);
After the change if I try to go down with scrollbar, it doesn't allow and takes the scrollbar to the top automatically, the table flickers. If the number of rows are less, then there is no problem at all.
On Chrome console I see these messages:
Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. DockingPanel.js:553 [Violation]
at start
and when I try to scroll:
[Violation] Forced reflow while executing JavaScript took 75ms
Interesting thing is, if I zoom in/out on browser or go full screen, the problem disappears, I can scroll down without problem to bottom rows of DataTable. And I don't see those [Violation] messages. But the click functionalities of table don't work
I have deleted all css for container(DockingPanel) and datatable itself but the problem didn't change. And I don't have any eventlisteners for scrolling. I know the question is broad range but I couldn't find any way out.
Does anyone have any idea ? Can it be a DOM Problem ?
Have you tried on Firefox or mobile browser?
Your problem is related to event listeners. Try adding
document.addEventListener('touchstart', handler, {passive: true});
to prevent PreventDefault.
The reason why it was flickering and not letting to go down on the table was first row which is a list created with empty strings "". When I filled the first list with any character, the problem is solved.
My goal is to simulate the behavior of jquery "datepicker" but instead of showing a calendar, I want to show a selectable table.
I have a working fiddle in chrome and FF but not in IE8 :( (I don't know if you guys can run fiddles with IE but if you can't, please make a local copy and open with IE, thanks)
Problems:
in IE, when I scroll, the div is hidden so I fixed it with
$("#test_table_container").scroll(function() {
if (myTimeOut) {
clearTimeout(myTimeOut);
}
});
but when I click on the scrollbar (instead of dragging it), the div is hidden. This is also the same when click the arrow buttons. This does not happen though if I drag the scroll bar FIRST, THEN click on the scroll bar.
the timout duration (90ms) is unfortunately very intermittent, sometimes I am able to select values in tr and then the div is hidden, but sometimes the div is hidden FIRST, before the click event of tr is triggered that's why the value is not reflected in the input.
There should be no need for a setTimeout hack for this. You may be better off, by binding a click on the body and then use delegation.
Please see the updated fiddle: http://jsfiddle.net/dz9VC/1/
This is just a crude code, but you will get the idea and can then optimize it as per your need. The updated fiddle should work on IE as well. The reason it wasn't working in IE8 specifically, maybe due to the box-model differences.
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.
I have a project where users can interact with a carousel like slide show, and drag between slides instead of using an arrow/number navigation. JS is based on the following plug in:
http://nooshu.com/explore/jquery-iphone-animation/
The issue is, in IE, if a user grabs inside the carousel and the mouse leaves the container element, the UI freaks out. If you play around with it, you'll see what I mean.
Is there a way to tell IE to handle the drag/click event to mimic firefox and chrome? I'm sure this is a common problem with IE and UI design.
Help!
EDIT: This also happens in Chrome. Firefox is the only browser that handles this in an intuitive way.
When, in IE, the mouse leaves the square, it's not releasing the mousedown event. So even when you let the button go, the plugin still thinks that the mouse is down.
Is it possible then that you wrap the plugin in say a div and on the div have a mouseleave event and force the plugin to execute mouseup?
I think you should be able to use the jQuery keyword "trigger" to do it.
The webkit browser on iphone has a 300ms delay between when a user does a touch and when the javascript gets a click event. This happens because the browser needs to check if a user has done a double tap. My app doesn't allow zooming so a double tap is useless for me. A number of people have proposed solutions to this problem and they usually involve handling the 'click' on the touch end event and then ignoring the click generated by the browser. However, it doesn't seem to be possible to suppress a click that gets sent to an input element. This can cause a problem if you have a dialog that opens above a form then a user hits the close button and their click gets routed to an input element when the form disappears.
Example with jqtouch (for iphone only)
You have to capture your event on touchstart if you want to get the fastest possible responsiveness. Otherwise you'll be doomed with this input lag.
You have to remember though that capturing event on touchstart and responding to it makes it impossible to cancel action by dragging your finger out of responsive area.
I have personally used this in my PhoneGap html/js based iphone application and it worked perfect. The only solution to give this almost-native feel.
Now regarding your problem - have you tried to stop the propagation of the event? It should solve your problem.
$('.button').bind('touchstart', function(e){
e.stopPropagation();
// do something...
});
hope it helps,
Tom
My colleagues and I developed an open source library called FastClick for getting rid of the click delay in Mobile Safari. It converts touches to clicks and handles those special cases for input and select elements cleanly.
It's as easy as instantiating it on the body like so: new FastClick(document.body), then listening for click events as usual.
I made Matt's FastClick a jquery plugin:
stackoverflow link
Just had a comment about the onClick handler being called without the necessary scope being passed. I updated the code to make it work.
There also seems to be a problem when input elements lie under the ghost event's position: the focus event gets triggered without being busted.
I see two problems in the question. One is handling the delay in click and the other is handling input focus.
Yes, both of these have to be handled properly in mobile web.
The delay in click has deeper reasons. The reason for this 300ms delay is explained very well in this article.
Responsiveness of the click event.
Thankfully this problem is well known and solved by many libraries.
JQTouch, JQuery Mobile,
JQuery.tappable,
Mootools-mobile,
and tappable
Most of these libraries create a new event called tap. you can use the tap event similar to the click event. This jquery-mobile event handling might help.
$("#tappableElement").tap(function(){
// provide your implementation here. this is executed immediately without the 300ms delay.
});
Now, the second problem is with the handling of input focus.
There is a noticeable delay here also.
This can be solved by forcing focus on the element immediately for one of the touchstart or touchend events. This JQuery event handling might help.
$('#focusElement').bind('touchstart', function(e){
$(this).focus();
});
$('#focusElement').focus(function(e){
// do your work here.
});
You can do e.stopPropagation in 'touchstart' event handling to avoid propagation. But I would strongly advise against return false; or e.preventDefault as that would stop default functionality like copy/paste, selecting text etc.