hammer.js
A javascript library for multi-touch gestures :// You can touch this
Hammer.JS - Hammer.js add multi-touch gestures to your webpage.
I find an interesting resource: Hammer. I try to swipe with Hammer and jQuery
1- I download the code here http://eightmedia.github.io/hammer.js/
2- I put that code in a document. I put a link to that code in the head of the document I want to use swipe:
3- I do not know how to use it. I try to do something similar to this in jQuery. I mean I want to swipe instead of click:
$(function(){
$(".blue").click(function() {
$(".blue").animate({left: "0"}, 500)
});
})
http://jsfiddle.net/Narcis/rmtXC/
Source: (StackOverflow)
I have implemented the hammer.js library for my events. The problem is that multiple events are triggered at the same time.
Can I set somekind of event priority. Let's say when transforming is beeing done all other events are ignored. When transform stops other events can be done.
hammertime.on("transform", function(evt) {
//transform
}
hammertime.on("drag", function(ev) {
//drag
}
I've already tried something like this:
Disabiling drag when we start transforming
hammertime.on("transform", function(evt) {
//transform
hammertime.options.drag="false";
}
And enabeling it back when transform is finished
hammertime.on("transformend", function(evt) {
//transformend
hammertime.options.drag="true";
}
This approach works fine except somethimes the drag doesn't get back set to true. I want a 100% working sollution. Please help...
Source: (StackOverflow)
I want to know the innerWith/viewport width of the pinch to zoom when it's zoomed.
If it's below 500 px I want to change the image with:
$("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
I've tried something like this:
var hammer = new Hammer(document.getElementById("log"));
hammer.ontransformstart = function(ev) {
var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
if (pziW < 500) {
$("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
}
};
hammer.ontransform = function(ev) {
var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
if (pziW < 500) {
$("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
}
};
hammer.ontransformend = function(ev) {
var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
if (pziW < 500) {
$("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
}
};
But I don't know how to declare the innerWidth of the pinch to zoom.
Here is the jsFiddle:
http://jsfiddle.net/nLvu6/
Somebody has an answer?
Source: (StackOverflow)
I am trying to use hammer.js plugins with require.js but I have no luck.
Here is my code:
requirejs.config({
paths: {
"jquery": ('__proto__' in {}) ? "lib/zepto" : "lib/jquery",
"hammer-jquery": "lib/jquery.hammer",
"hammer-showtouches": "lib/hammer.showtouches",
"hammer-fakemultitouch": "lib/hammer.fakemultitouch"
},
shim: {
"jquery": {
exports: "$"
},
"hammer-showtouches": {
deps: [ "hammer-jquery" ],
exports: "Hammer.plugins.showTouches"
},
"hammer-fakemultitouch": {
deps: [ "hammer-jquery" ],
exports: "Hammer.plugins.fakeMultitouch"
}
},
waitSeconds: 30
});
requirejs(["jquery","hammer-jquery","hammer-showtouches","hammer-fakemultitouch"], function ($,Hammer) {
$(function(){
if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
Hammer.plugins.showTouches();
Hammer.plugins.fakeMultitouch();
}
});
});
And here is the error:
Uncaught TypeError: Cannot read property 'plugins' of undefined hammer.showtouches.js:7
Uncaught TypeError: Cannot read property 'plugins' of undefined require.js:8
Uncaught TypeError: Cannot read property 'plugins' of undefined hammer.fakemultitouch.js:7
Uncaught TypeError: Cannot read property 'plugins' of undefined require.js:8
I have tried to include Hammer in shim config with no luck (It's not necessary beacause last version of jquery.hammer is AMD compatible).
Source: (StackOverflow)
i want use hammer js to build a double Tab gesture for like post.
Html :
<div class="gitem-wrap row">
<div class="gitem">
<div class="well">
<figure id="img-item"><img src="images/2.jpg" class="img-responsive"></figure>
<article>
...
</article>
</div>
</div>
<div class="gitem">
<div class="well">
<figure id="img-item"><img src="images/2.jpg" class="img-responsive"></figure>
<article>
...
</article>
</div>
</div>
</div>
Js to initialize Hammer js :
var myElement = document.getElementById('img-item');
var mc = new Hammer(myElement);
mc.on("doubletap", function() {
//myElement.toggleClass('liked');
console.log('Double tap!');
return false;
});
it's just work for first element but not for all .
How can i initialize Hammer js for all elements with same id?
JSFIDDLE : http://jsfiddle.net/ekdfokc5/
Thanks for helping. its work great in hammer.js v1
http://jsfiddle.net/ekdfokc5/3
but in new version (2.0.4) there is problem and $('figured').toggleClass('liked') not work after doubletap.
http://jsfiddle.net/ekdfokc5/4
Source: (StackOverflow)
I have started using Hammer.js (https://github.com/eightmedia/hammer.js) which is a great little script, but I'm unsure how to delegate the events using jQuery's .on() event handler.
I've set up a little jsfiddle example here: http://jsfiddle.net/will/3dUKu/1/
var i = 0;
// How would I apply hammer to this situation?
$('nav').on('click', 'button', function() {
$('<button id="' + i + '">Extra button ' + i + ' (' + $(this).attr('id') + ')</button>').appendTo('nav');
i++;
});
Source: (StackOverflow)
I'm currently developing a web-app, that has to run on both computer systems and tablets. Possibly even smartphones.
Now, the menus are on one page, horizontally next to each other. The idea is that you can switch menu by swiping the content, just like you can do on tablets and smartphones. Plus, there are buttons for computer users which will be used to switch menus.
Menu content will be loaded using JQuery's AJAX functions, and menu moving through JQuery's animate function.
Now I was wondering how I could make this animation properly. When swiping I would need to take speed, direction, and distance insto account. When clicking buttons, a static speed should be applied.
Anyone any ideas?
Source: (StackOverflow)
How can I detect the scale (or distance pinched) of the pinch to zoom when the meta name="viewport" is set to user-scalable=yes?
I've tested on Android but the pinch to zoom can't be detected if the meta name="viewport" is set to user-scalable=yes. If the meta name="viewport" is set to user-scalable=no then the pinch to zoom can be detected but then I'm not able to zoom in on the document.
Here are my tests on jsFiddle:
Hammer.js:
http://jsfiddle.net/pE42S/
var pziW = "test";
var viewport_width = $(window).innerWidth();
var zoom = 0;
var hammer = new Hammer(document.getElementById("touchme"));
hammer.ontransformstart = function(ev) {
console.log("ontransformstart");
console.log(ev);
//pziW = $(window).innerWidth() / 2 * ev.scale;
zoom = ev.scale;
var msg = "ontransformstart " + pziW + " scale " + zoom;
log(msg);
};
hammer.ontransform = function(ev) {
console.log("ontransform");
console.log(ev);
zoom -= ev.scale;
viewport_width+=viewport_width*zoom;
zoom = ev.scale;
pziW=viewport_width;
//pziW = $(window).innerWidth() / 2 * ev.scale;
jqUpdateSize();
var msg = "ontransform " + pziW + " scale " + zoom;
log(msg);
};
hammer.ontransformend = function(ev) {
console.log("ontransformend");
console.log(ev);
var msg = "ontransformend " + pziW + " scale " + zoom;
log(msg);
};
TouchSwipe:
http://jsfiddle.net/pE42S/1/
$(function() {
$("#touchme").swipe( {
pinchStatus:function(event, phase, direction, distance , duration , fingerCount, pinchZoom) {
console.log("pinchStatus");
console.log(event);
pziW=viewport_width - distance;
$("#log").text(pziW);
jqUpdateSize();
},
fingers:2,
pinchThreshold:0
});
});
Somebody has an answer?
Source: (StackOverflow)
I wanted to learn Hammer JS by building a simple program to drag an element around the screen, pretty much just like the same on the Hammer homepage.
I used the code posted on the Hammer github page, which seems to be the same code used on the homepage. I was testing the work in Chrome (37.0 / OSX). After working with it for a while and being unable to get the element to move, I opened the same page in Safari and FF. It worked perfectly in both of those browsers.
To pare things down, I added just the required to code to see an event trigger:
var mover = document.getElementById("mover");
var mc = new Hammer.Manager(mover);
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
mc.on("panstart panmove", function(ev) {
console.log(ev);
});
Nothing gets logged in Chrome, but I get proper logging as expected in Safari and FF. I extended the event listener to include 'pan, panend, pancancel, panleft, panright, panup, pandown'. These events WOULD log in Chrome, so it seems like only panstart and panmove were being ignored.
So this code will run on the hammer.js page in Chrome, so clearly Chrome does see the panstart and panmove events in that browser, it's just not happening in my code. Which means somehow I am missing something, despite copying the code over from their site. I checked we were on the same Hammer version, but I am not sure sure what else from here I need to check.
Has anyone else encountered and solved this problem? Or perhaps knows what I am doing wrong to create this issue?
Thanks.
Source: (StackOverflow)
I have a little "pdf"-viewer to use in the iPad. Since I found that rendering PDF in HTML is painfully slow, I tried to go with a PNG solution. Since it's a webapp and everything is pixel -perfect, zoom is disabled.
My idea was to create sort of a "window" which is in fact a div that encapsulates an image, no matter how big it is. So far so good.
However, I decided to try Hammer to emulate the pinchin pinchout and something weird happens. When you pinchin or out, the page seem to shake and then you're not able of doing nothing else... However, if you add an alert on the event handler (yes, an alert) it works as expected.
This is the code:
(function($){
var pdfViewer = {
pdf: {},
currentPage : 1,
currentZoom : 200,
defaultZoom : 200,
intervalZoom : 30,
el : {
pdfWindow : $('.pdf-window'),
image : $('.pdf-window').find('img')
},
init : function(){
this.bindEvents();
},
bindEvents : function(){
var self = this;
this.el.pdfWindow.hammer().on('pinchin',function(e){
self.currentZoom = self.currentZoom - self.intervalZoom;
self.updateZoom.apply(self);
});
this.el.pdfWindow.hammer().on('pinchout',function(e){
self.currentZoom = self.currentZoom + self.intervalZoom;
self.updateZoom.apply(self);
});
},
updateZoom : function(){
this.el.image.attr('width',this.currentZoom + '%');
}
};
pdfViewer.init();
})(jQuery);
And this is a clean demo. You should try in an iOS device... Any ideas of what can be wrong?
Bug demo: http://jsbin.com/ivixov/1/quiet
Source: (StackOverflow)
js to also support touch-gestures. I'm bagging my head about prevent default actions. when I set event.preventDefault or event.gesture.preventDefault() or even apply parameter {prevent_defaults: true } on hammer it just triggers default action on the anchor. How can I prevent that and/or what am I doing wrong?!
Code snippet;
function initializeNavigation() {
$("nav").hammer({prevent_defaults: true }).on("tap", "a", function(event) {
event.preventDefault();
event.gesture.preventDefault();
var target = $(this.hash);
scrollToTarget(target, 1200);
// if there is an open detailItem then close it.
if (detailItemOpen) {
$("div." + detailItemOpen).slideUp();
}
})
if (Modernizr.mq('only screen and (max-width: 767px)')) {
initializeMobileMenuAndSetButton();
}
}
Source: (StackOverflow)
I want to swipe right to close my menu. I want users to be able to scroll up and down through my menu given that the menu may be long on mobile.
However if you swipe up or down and you swipe to the right a little bit, it closes the menu.
http://codepen.io/ashconnolly/pen/gpBLPp/
$('.menu_toggle').click(function (event) {
$('.menu').toggleClass('active');
});
new Hammer(document.getElementById('menu')).on("panright", function(ev) {
$('.menu').removeClass('active');
});
Is there a simple way round this?
I almost want a threshold to make it obvious.
Like a simple calculation - IF distance traveled to the right is greater than distance traveled vertically = swipe right.
Hope you can help!
Source: (StackOverflow)
I'm using hammer.js for a touch menu for a site, and getting:
"Object doesn't support property or method 'addEventListener'"
hammer.js, line 247 character 13
with IE8.
The actual code from hammer.js that is not working:
/**
* simple addEventListener
* @param {HTMLElement} element
* @param {String} type
* @param {Function} handler
*/
bindDom: function(element, type, handler) {
var types = type.split(' ');
for(var t=0; t<types.length; t++) {
element.addEventListener(types[t], handler, false);
}
},
Any idea how I can fix this?
Jquery used to have a similar issue:
http://bugs.jquery.com/ticket/11127
Source: (StackOverflow)
I'm developing an app for Chrome on a Microsoft Surface Pro 2 running Windows 8.1. Recently, the Chromium team decided they wanted to add the pinch-to-zoom gesture in Chrome for Windows 8, which is all and good. They did not, however, add a flag to disable this behavior in Chrome's settings for those few of us that don't want pinch-to-zoom functionality.
Now I'm left trying to disable the browser's default behavior by other means. The first thing I tried was to add this meta-tag:
<meta name="viewport" content="width=device-width, initial-scale=1.5, maximum-scale=1.5, user-scalable=no" />
It had no effect. I've also been trying to use the hammer.js touch library to disable the behavior with limited success; pinching sufficiently fast enough still zooms the page.
Does anyone know of a effective way to disable the pinch-to-zoom behavior on Chrome for Windows 8.1?
Source: (StackOverflow)