Yesterday I upgraded to hammer 2.04 and my pinch gestures stopped working.
As far as I can sell the syntax from v1 should still work, and in fact tap events are working, but the pinch does not.
map.hammer = new Hammer(map.canvas[0]);
map.hammer.on("pinchin", function (e) {
log("pinchin");
})
map.hammer.on("tap", function (e) {
log("tap")
});
Anyideas?
This method works.
var mc = new Hammer.Manager(map.canvas[0]);
mc.add(new Hammer.Pinch());
mc.on("pinch", function(ev) {
log("pinch ", ev);
});
Related
I have hammer js and the jquery-hammer plugin that handles a very simple swipe action.
What should happen is that when I swipe left I have a calendar with a date that goes back with one day and when I swipe right it should go forward with one day. At the moment when I swipe it jumps multiple days depending on the direction I swipe and the time the swipe took (I'm guessing).
When I change this function to simple click events on a left and right container, the dates advance only one day per click as expected.
event.gesture.preventDefault();
gives a "not function error"
How can I get the swipe to only call this function once for every swipe?
module.exports = View.extend({
template: 'bookings/templates/components/body',
className:'bookings-lists',
deviceType: App.browser.device.deviceType,
events: {
'swipe' : 'swipeMe'
},
swipeMe: function(e){
var that = this;
container.hammer().on('swipeleft', function(event) {
event.gesture.preventDefault();
that.model.pushDateForward();
}).on('swiperight', function(event) {
event.gesture.preventDefault();
that.model.pushDateBackward();
});
} });
My comment above is totally wrong. Checking what direction the swipe is rather than just relying on built in "swipeleft" or "swiperight" works. No more multiple date changes.
swipeMe: function(e){
if(e.gesture.direction === 4)
{
e.preventDefault();
this.model.pushDateBackward();
}
else if(e.gesture.direction === 2)
{
e.preventDefault();
this.model.pushDateForward();
}
},
This is how it looks for jQuery.
How can I achieve the same thing with Mootools?
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// do something
}
if (direction == 'forward') {
// do something else
}
});
In jQuery, this is a wrapper around onhashchange and popstate, it's not even standard jQuery but jQuery mobile etc.
There is no such wrapper out of the box in mootools-core but you can make one.
eg Cpojer wrote history.js - http://mootools.net/forge/p/history - there were a lot others.
if you want to go native, you can.
window.addEvent('hashchange', function(e){
console.log(e);
alert('hi');
});
etc etc.
I'm using Hammer.js to look for horizontal pan gestures, I've devised a simple function to clicks a button when panned left or right. It works okay, except the vertical scroll doesn't do anything on a touch device, or it's really glitchy and weird.
Here's the function:
var panelSliderPan = function() {
// Pan options
myOptions = {
// possible option
};
var myElement = document.querySelector('.scroll__inner'),
mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan(myOptions));
// Pan control
var panIt = function(e) {
// I'm checking the direction here, my common sense says it shouldn't
// affect the vertical gestures, but it blocks them somehow
// 2 means it's left pan
if (e.direction === 2) {
$('.controls__btn--next').click();
// 4 == right
} else if (e.direction === 4) {
$('.controls__btn--prev').click();
}
};
// Call it
mc.on("panstart", function(e) {
panIt(e);
});
};
I've tried to add a horizontal direction to the recognizer but it didn't really help (not sure if I did it even right):
mc = new Hammer.Manager(myElement, {
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
Thanks!
Try setting the touch-action property to auto.
mc = new Hammer.Manager(myElement, {
touchAction: 'auto',
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
From the hammer.js docs:
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
User patforna is correct. You need to adjust the touch-action property. This will fix scrolling not working when you have hammer bound on a big element in mobile.
You create a Hammer instance like so
var h = new Hammer(options.contentEl, {
touchAction : 'auto'
});
I was working on a pull to refresh feature, so I need the pan event.
Add the recognizers.
h.get( 'pan' ).set({
direction : Hammer.DIRECTION_VERTICAL,
});
h.on('panstart pandown panup panend', eventHandler);
Inside the eventhandler, you'd look at the event that was triggered and manually call on event.preventDefault() when you require it. This is applicable for hammer 2.0.6.
For anyone who's looking the pull to refresh code was taken from - https://github.com/apeatling/web-pull-to-refresh
My problem was that vertical scroll was toggling a sidebar that was supposed to show/hide on horizontal pan/swipe. After looking at the event details, I realized that Hammer probably triggers panleft and panright event based on X delta and doesn't consider Y delta, so my quick solution was to check the pan direction in my handler:
this.$data.$hammer.on('panleft', (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
return;
}
this.isVisible = true;
});
I was stuck on this for several days. Hope this will fix your problem.
mc = new Hammer(myElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
touchAction: 'auto',
});
When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.
mc.on('panmove panstart', event => {
mc.addClass('is-dragging');
}
);
.is-dragging {
touch-action: none !important;
}
Hammer 2.x does not support vertical swipe/pan. Documentation says:
Notes:
When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures
You can however use older 1.1.x version, which supports vertical gestures
——
Clarification: this refers to a ‘simple instance’ which is when you don’t pass in any recognizer configuration as the second parameter. In other words these are the defaults but can (and usually should) be overridden.
I have the following script code designed to capture double tap events so I can toggle an image between a size that fits on the page and full size. The problem is that the tap event is not firing at all in Safari browser running on iPhone 4. In the below code, the alert never displays regardless of what I do on the touch screen.
$(function () {
$('#showImage').on('tap', function (event) {
alert("gets in tap event");
var d = new Date();
var tapTime = d.getTime();
if (tapTime - lastTapTime > 500) {
lastTapTime = tapTime;
}
else {
toggleResize();
}
});
});
Why isn't this working?
tap event is now working. I had some script code on an earlier page that was breaking the script code on this page. When I removed the earlier script code, this script code started working again.
I have a ckeditor plugin and inside the init: I want to capture the click event so I can do something.
CKEDITOR.plugins.add('Columns',{
init : function(editor) {
editor.on('doubleclick', function(ev) {console.log('hello');}); // Works
editor.on('focus', function(ev) {console.log('hello');}); // Works
editor.on('click', function(ev) {console.log('hello');}); // Does not work
editor.on('mousedown', function(ev) {console.log('hello');}); // Does not work
}
});
Any Ideas???
EDIT:
OK could not get click working, I believe we need to create an event for that. However thanks to this post: http://alfonsoml.blogspot.com.au/2011/03/onchange-event-for-ckeditor.html
I managed to use 'saveSnapshot' which seems to fire each time I click so this now works
editor.on('saveSnapshot', function(ev) {console.log('hello');}); // Works
I realise this is old but it doesn't have an answer to the original question.
CKEDITOR.plugins.add('Columns',{
init : function(editor) {
editor.on('instanceReady', function (e) {
this.container.on('click', function (event) {
console.log('hello');
});
});
}
});
Note: this won't work when CKEditor is in 'classic iframe mode'. Instead, you'll need to use this.document (see: document property) to get a reference to the iframe.