-
-
Save jshbrntt/f778e4f5a559268a874e to your computer and use it in GitHub Desktop.
| // <img id="myimage" src="http://placecage/1280/720"> | |
| var image = document.getElementById('myimage'); | |
| var mc = new Hammer.Manager(image); | |
| var pinch = new Hammer.Pinch(); | |
| var pan = new Hammer.Pan(); | |
| pinch.recognizeWith(pan); | |
| mc.add([pinch, pan]); | |
| var adjustScale = 1; | |
| var adjustDeltaX = 0; | |
| var adjustDeltaY = 0; | |
| var currentScale = null; | |
| var currentDeltaX = null; | |
| var currentDeltaY = null; | |
| // Prevent long press saving on mobiles. | |
| webpage.addEventListener('touchstart', function (e) { | |
| e.preventDefault() | |
| }); | |
| // Handles pinch and pan events/transforming at the same time; | |
| mc.on("pinch pan", function (ev) { | |
| var transforms = []; | |
| // Adjusting the current pinch/pan event properties using the previous ones set when they finished touching | |
| currentScale = adjustScale * ev.scale; | |
| currentDeltaX = adjustDeltaX + (ev.deltaX / currentScale); | |
| currentDeltaY = adjustDeltaY + (ev.deltaY / currentScale); | |
| // Concatinating and applying parameters. | |
| transforms.push('scale({0})'.format(currentScale)); | |
| transforms.push('translate({0}px,{1}px)'.format(currentDeltaX, currentDeltaY)); | |
| webpage.style.transform = transforms.join(' '); | |
| }); | |
| mc.on("panend pinchend", function (ev) { | |
| // Saving the final transforms for adjustment next time the user interacts. | |
| adjustScale = currentScale; | |
| adjustDeltaX = currentDeltaX; | |
| adjustDeltaY = currentDeltaY; | |
| }); |
Hi.
I have also same error webpage is not declared.Can you Please help me for this.
Thanks:)
@davidalexander @Krishna25Vrinsoft
Just use your image container instead or set it to var webpage = document.querySelector('.myContainer').
Hi,
I'm trying to get this code to work. Things trip up during execution when I get an error reported on the following code:
// Concatinating and applying parameters.
transforms.push('scale({0})'.format(currentScale));
The exact error message is: uncaught TypeError: "scale({)})".format is not a function.
I include the following reference to hammer in my code:
<script type="text/javascript" src="https://hammerjs.github.io/dist/hammer.js"></script>Do I need to reference an additional library?
Thanks for any help you can provide.
@artstudio123 you can use the following instead:
transforms.push('scale(' + currentScale + ')');
transforms.push('translate(' + currentDeltaX + 'px,' + currentDeltaY + 'px)');
Hello,
I am trying to make Hammer to work, but I can't do it neither for a very simple task.
Here is my code
`
<meta name="msapplication-tap-highlight" content="no" />
<title>HammerTest</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
}
#test {
position: relative;
height: 50%;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(16, 19, 37);
font-family: Georgia;
font-size: 60px;
color: #fff;
}
#p1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="test">
<p id="p1">Hello World!</p>
</div>
<script src="javascripts\Hammer\hammer.min.js"> </script>
<!-- Custom gesture manager for touch devices -->
<script>
var myElement = document.getElementById("test");
var mc = new Hammer.Manager(myElement);
mc.get("pinch").set({ enable: true });
mc.on("pinch", function(ev) {
alert(ev);
});
</script>
</body>
I tested it on old Android (4) and IPad2 devices. I expected to see an alert with the name of the event, but nothing to do.
Where am I wrong?
Thank you very much,
Federico
...the first part of my code has been cutted in my previous message...I wanted to add it here but it is not shown....I don't know why...
Anyway there was the meta tag that suppress the native pinch to zoom function.. i.e.
and the html doctype declaration, the html and head tags openings
Sorry, the meta tag has been still deleted....??
I solved and also posted an answer on Stackoverflow to an user who experienced my same problem. I discovered that console said that the mc.get() returned a null value. As a matter of fact, with my above statements, the mc object.recognizers array was void.
So I used this way to initializate the hammer instance:
var mc = new Hammer.Manager(myElement, { recognizers: [ [Hammer.Pinch, {enable: false}] ] });
and now it works.
Why should recognize pinch and pan? and in my config, the pinch event will always trigger the pan event, This really bother me.
Maybe somebody knows packages where it is implemented?
Hi there
Just trying to get this to work but the
webpagevariable isn't declared. Could you confirm the intended markup?Thanks!