I want to translateX() an element when the user pans it using Hammer.js. When the user drags the content left, I want to translate the content left. The same for right.
Current code:
var manager = new Hammer.Manager(elem);
var panner = new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 });
manager.add(panner);
manager.on("panleft", function(e) {
elem.style.transform = "translateX(" + (e.distance * -1) + "px)";
});
manager.on("panright", function(e) {
elem.style.transform = "translateX(" + e.distance + "px)";
});
It works except if the user pans left then goes back right, it glitches and goes negative. How can I make it work?
I solved it by binding to the panmove event and using the e.deltaX property:
manager.on("panmove", function(e) {
elem.style.transform = "translateX(" + e.deltaX + "px)";
});
Related
So I am trying to allow the user to shift a div to the left or right in angularjs. Right now I have the function below. It works on the first click but all it does is toggle every click and is saying left is NaN. What am I doing wrong here? Also if someone has a better solution for this please let me know.
vm.scrollSelector = function(e, direction) {
var target = document.getElementById('item-selector');
var left = target.style.left;
if(direction === 'left') {
left += 600;
target.setAttribute('style', 'left: ' + left + 'px');
} else {
left -= 600;
target.setAttribute('style', 'left: ' + left + 'px');
}
}
So I quickly found the answer just by looking at the docs. Left is returned as a string so all I had to to was do parseInt(left) + 600 and it worked.
vm.scrollSelector = function(e, direction) {
var target = document.getElementById('item-selector');
var left = target.style.left.match(/\d+/);
left = parseInt(left[0], 10)
if(direction === 'left') {
left += 600;
target.setAttribute('style', 'left: ' + left + 'px');
} else {
left -= 600;
target.setAttribute('style', 'left: ' + left + 'px');
}
}
First try to see what value target.style.left is returning. It might be returning value like '10px'. You need to convert this into a number first then perform the addition or subtraction.
I have to implement the rotation of an image even on mobile devices. Currently if we place the mouse on the image simulates a 3D rotation but on mobile devices nothing happens.
I saw that I have to add:
if (window.DeviceMotion) {// Do something}
But I do not understand how to implement it.
Does anyone have any ideas?
Thank you
use strict';
$(document).on('mousemove', function (e) {
$('.light').css({
left: e.pageX - 300,
top: e.pageY - 300
});
});
var el = $('.js-tilt-container');
el.on('mousemove', function (e) {
var _$$offset = $(this).offset();
var left = _$$offset.left;
var top = _$$offset.top;
var cursPosX = e.pageX - left;
var cursPosY = e.pageY - top;
var cursFromCenterX = $(this).width() / 2 - cursPosX;
var cursFromCenterY = $(this).height() / 2 - cursPosY;
$(this).css('transform', 'perspective(500px) rotateX(' + cursFromCenterY / -40 + 'deg) rotateY(' + -(cursFromCenterX / -40) + 'deg) translateZ(-45px)');
var invertedX = Math.sign(cursFromCenterX) > 0 ? -Math.abs(cursFromCenterX) : Math.abs(cursFromCenterX);
//Parallax transform on image
$(this).find('.js-perspective-neg').css('transform', 'translateY(' + cursFromCenterY / 10 + 'px) translateX(' + -(invertedX / 10) + 'px) scale(1.15)');
$(this).removeClass('leave');
});
el.on('mouseleave', function () {
$(this).addClass('leave');
});
OK thanks. I've tried setting the "deviceorientation" code in various ways but it does not work. I used these variables. How could I integrate them in my code? thank you
if (!('ondeviceorientation' in window)) {
document.getElementById('do-unsupported').classList.remove('hidden');
} else {
document.getElementById('do-info').classList.remove('hidden');
window.addEventListener('deviceorientation', function(event) {
document.getElementById('cube').style.webkitTransform =
document.getElementById('cube').style.transform =
'rotateX(' + event.beta + 'deg) ' +
'rotateY(' + event.gamma + 'deg) ' +
'rotateZ(' + event.alpha + 'deg)';
document.getElementById('beta').innerHTML = Math.round(event.beta);
document.getElementById('gamma').innerHTML = Math.round(event.gamma);
document.getElementById('alpha').innerHTML = Math.round(event.alpha);
document.getElementById('is-absolute').innerHTML = event.absolute ? "true" : "false";
});
}
On mobile, you need to listen for the touchmove or pointermove events. See caniuse for the corresponding browser support: Touch events, Pointer events
By the way, from a user experience perspective you might want to try rotating based on device orientation (the deviceorientation event), rather than touch.
so I have a canvas that takes up 100% of the page size and ontop of this canvas are other html elements. I want to make it so any element that has the class game-gui can be dragged round the screen (so users can position them where they want).
the js fiddle for this looks like this:
http://jsfiddle.net/VYJCj/2/
the code for this can be seen below:
$('.game-gui').each(function(i, obj) {
$(obj).on('dragstart', function(event){
var left = parseInt($(obj).css("left"), 10);
var top = parseInt($(obj).css("top"), 10);
event.originalEvent.dataTransfer.effectAllowed = 'move';
var str = (left - event.originalEvent.clientX) + ',' + (top - event.originalEvent.clientY)+ ',' + event.target.id;
event.originalEvent.dataTransfer.setData("text/plain", str);
});
});
this.canvas = $('#game_canvas');
this.canvas.bind('drop', function(event){
event.stopPropagation();
event.preventDefault();
var offset = event.originalEvent.dataTransfer.getData("text/plain").split(',');
console.log(offset);
var obj = $('#' + offset[2]);
var clientX = event.originalEvent.clientX || 0;
var clientY = event.originalEvent.clientY || 0 ;
obj.css('left', ( clientX+ parseInt(offset[0],10)) + 'px');
obj.css('top', ( clientY + parseInt(offset[1],10)) + 'px');
return false;
});
this.canvas.bind('dragover', function(event){
event.preventDefault();
event.originalEvent.dataTransfer.dropEffect = 'move';
return false;
});
as you will be able to see from the demo you can move the elements around the page however they move into different positions then they should! would anyone be able to help me on the matter?
I have been trying for a while now to get a simple pan of a div to work, I however can not seem to get it to 100%. It partially works with bugs.
$("#view_point").mousedown(function(e) {
start_x = e.pageX;
start_y = e.pageY;
e.preventDefault()
//On Click set start x and y vars
}).mousemove(function(e) {
temp_x = e.pageX;
temp_y = e.pageY;
e.preventDefault();
}).mouseup(function(e) {
temp_x = Math.abs(temp_x - start_x);
temp_x = Math.abs(temp_y - start_y);
console.log(temp_x + " - " + temp_y);
//Animate the map
$("#tiles").animate({
marginTop: '-' + temp_x,
marginLeft: '-' + temp_y
}, 50);
});
How do I go about making a pan script that will pan inside a div that has its overflow property set to hidden.
I wrote this simple code to print a small dot on the location where I clicked with the mouse pointer:-
$(document).ready(function(){
$('#pane').click(function(e){
var pixel = $('<div />')
.addClass('pixel')
.css({
top: e.clientY,
left: e.clientX
});
$('#pane').append(pixel)
});
});
See this fiddle I created. When I click anywhere inside the rectangle, a small dot is printed in that location. But the problem is that dot is not printed where the mouse pointer's tip was. See the below image to see what I meant:-
I tried in both Firefox and Chrome.
Your code is working correctly,
Zoom your page and check,
i have changed pixel height and width for better understanding from 2px to 3px.
and drawing from e.clientX -1 and e.clientY -1 position so it looks exactly center.
You can find Fiddle
The most examples I've found don't work if there are a scrolled page... I used this algorythm in order to get the position:
var getOffsets = function($event){
var p = {};
var body = "search the document for the body element";
p.x = body.offsetLeft;
p.y = body.offsetTop;
while (body.offsetParent) {
p.x = p.x + body.offsetParent.offsetLeft;
p.y = p.y + body.offsetParent.offsetTop;
if (body == document.getElementsByTagName("body")[0]) {
break;
}
else {
body = body.offsetParent;
}
}
return p;
}
However, after that you have to consider also other elements, im my case:
var GetExactClickPosition = function($event){
var tr = $($event.target);
if ($event.target.localName != 'tr'){
tr = $($event.target).closest('tr');
}
var listDiv = $($event.target).closest('div');
var p = getOffsets($event);
var container = $('#mailingListExcludeMenuContainer');
container.css({
top: p.y - listDiv.scrollTop() - tr.height() - container.height() + $event.offsetY + "px",
left: p.x + $event.offsetX + "px"
});
container.show();
};
I have a list with scroller inside the main scroller of the page...
I used it in order to show a little menu at the position of the mouse click.