The problem seems simple enough yet it is not working.
What I want is a div to hide on tap. I currently am using jQuery but if anyone know have to do this in a more native manner id love to do that!
I have tried using this but it did not work
$(".event_image").on('tap', function(e) {
$(this).hide()
});
anyone got any ideas?
jQuery doesn't have anything for touch/tap events, but you can easily build your own by using these:
touchstart
touchmove
touchend
touchcancel
More information available here.
or you can use a plugin such as hammer.js which supports touch events & much more!
Could you just do a click event? They're basically the same.
$(".event_image").on('click', function() {
$(this).toggle();
});
Related
I need to support both, mouse and touch events, so I have code like this
<button
(touchstart)="doSomething($event)"
(mousedown)="doSomething($event)">
Is there some way to merge both into one ? I also noticed that touch devices trigger mouse events, so I need a better solution. Is it possible, for example, to write an event listener, something like this
<button (pointerDown)="doSomething">...</button>
And in my PointerDown event class I listen to both events ? This would be nice :)
I also found ng2-events library, not sure if it will do what I need.
Any help would be appreciated!
You can do all that using attribute directive and #HostListener. Dont have everything in my head but you'll understand once you look into it
I'm trying to execute some code whenever a touchmove event is fired. However, the touchmove event is very buggy right now. In many browsers, including the Android browser and Chrome 34.
A "solution" does exist to try to "fix" this problem:
$('html').on('touchmove', function(e) {
e.preventDefault();
//...
});
By adding preventDefault it will cause the browser to update the event. However it also stopped all further touchmove events which I didn't really want.
Is there, by any chance, a workaround that fixes this bug but also not cancelling the event? Thanks.
I believe you will need a bit more to it, and I think the answer is somewhere in terms of using all the other events in coordination and managing an "active" state.
el.on('touchstart mousedown', function(e) ...
el.on('touchcancel', function(e) ...
el.on('touchmove mousemove', function(e) ...
el.on('touchend mouseup', function(e) ...
I use angular-touch for a few things and they seem to be tackling the same problems, its worth looking at some example code.
https://github.com/angular/bower-angular-touch/blob/master/angular-touch.js#L122
The age old problem:
Getting the scroll event to fire while a user is scrolling on an element while on a mobile site or app(web view).
All I'm looking for is access to the correct scrollTop() value while a user is scrolling my page on a mobile device instead of getting it when the user stops.
I'm sure there is a workaround somewhere, if I'm correct this limitation is set by iOS and there has been discussion over it for the past few years.
I've tried implementing native scroll emulators but none of them seem to be working how I want and to be honest it seems like overkill if all I really want is a persistent scrollTop() while a user is scrolling.
I'm currently thinking about maybe starting a counter on touchStart and stopping it on touchStop but something tells me I'm wasting my time.
Any help guys?
With jQuery:
$('body').bind('touchmove', function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
});
This should give you a consistent stream of the scrollTop value when the user scrolls, but be careful as it's going to fire even while the user is just holding his finger on the screen.
Note that if you're using jQuery >= 1.7 the preferred binding method is
.on() instead of the .bind() method I've used in my example. In that case my example would be
$('body').on({
'touchmove': function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
}
});
Source: https://github.com/dantipa/pull-to-refresh-js/blob/master/jquery.plugin.pullToRefresh.js
maybe you could take a look at how iScroll does it in their _move-method which is bound to the touchmove event: https://github.com/cubiq/iscroll/blob/master/src/core.js#L152
It's a bit complicated but i'm sure you'll figure it out. You could also just use iScroll to begin with and bind to their scrollmove event (I'm not sure how it's called on iScroll 5 but it was onScrollMove in iScroll 4). that.y will then give you the correct value.
I had to go the iScroll route to do this. I wrote up my implementation here: https://stackoverflow.com/a/23140322/229315
I want to simulate / fire a touch event (touchstart or touchend) on a link with YUI 3.
The function .simulate doesn't handle the 'touch event', but only click/dblclick etc....
When i search in the official doc, there is nothing about it on the event section.
Is there anyway to do this ?
Thanks
I'm not sure you can use touchstart or touch{move,end} on non-touch device.
Maybe you want to try to fire a 'gesturemovestart', that should be cross-device.
Y.one.('#yourLink').fire('gesturemovestart')
See http://yuilibrary.com/yui/docs/event/touch.html#move
When the link is clicked, I fire 'gesturemovestart': http://jsfiddle.net/DrMw8/
Best regards,
Ludo
No, there is no support for simulation of touch events yet. It's documented here: http://yuilibrary.com/yui/docs/event/simulate.html#no-touch-events-yet
I have a site which is built out of many iframes.
I am working on monitoring user activity - like when user clicks or keydown.
This is only to see if user is idle or not.
For this, I am drilling down to all iframes,its div tags and registering hover and click events.
Meanwhile I dont want to override/break existing inline event handlers which are defined by the application.
Will jquery override exiting eventhandlers? If yes, how can check this to make sure I dont do this?
Here is my usage.
$(divElementObj).click( function() {
alert("div click");
});
No, jQuery works by using addEventListener/attachEvent. Inline and pre-existing handlers are not overwritten.
See jsFiddle example and the jQuery source to show how this is done.
As long as you don't use something like event.stopPropagation(); you should be fine. event.stopPropagation(); could cause issues if your existing site is expecting events to bubble.
There is a plugin for it, but you should only do this when you really need to.
jQuery Override Plugin
$(divElementObj).override('onclick', 'click', function(...));