I'm trying to get one of those fancy circular cursors with a following outside ring, that changes when you hover an image for example.
I found most of the code already built on codepen, but when i applied to a longer page, the cursors seems to be off by few too many pixels to be visible. It works fine until you start scrolling, as the scroll increases so does the offset and makes it pretty much useless if you scroll, you can't see the cursor.
Here is a modified codepen: https://codepen.io/miguelpppires/pen/xxKLreP
I'm almost 100% sure this is the issue, but i have no idea how to fix it:
$(document).on('mousemove', function(e) {
$('.cursor, .follower').css({
"transform": "translate3d(" + (e.pageX) + "px, " + (e.pageY) + "px, 0px)"
});
Any and all help is appreciated,
Thanks
You need to use clientX and clientY, becuase pageX and pageY take the offset from the top of the page and clientX and clientY take the offset from the top of the viewport.
$('.cursor, .follower').css({
"transform": "translate3d(" + (e.clientX) + "px, " + (e.clientY) + "px, 0px)"
});
I have resolved issue using pageX and pageY insted of clientX and clientY.
Related
When I rotate an element via
myElem.css('-moz-transform', 'rotate(' + degree + 'deg)');
myElem.css('-webkit-transform', 'rotate(' + degree + 'deg)');
myElem.css('-o-transform', 'rotate(' + degree + 'deg)');
myElem.css('-ms-transform', 'rotate(' + degree + 'deg)');
I need to get its correct left/top position...
myElem.getBoundingClientRect().left
...does not deliver the correct x/y positions. As well as f.e. using jQuery...
$(myElem).position().left
...delivers wrong values.
Here´s an image to show what I mean
(source: dasprinzip.com)
What to do?
I wrote a JSFiddle for you which hopefully will give you the ingredients to work everything out:
http://jsfiddle.net/pM54e/2/
The span in the Fiddle is to test if the value is correct. Give it the height that's calculated by the formula and see if it matches with the corner of the orange box.
var numY = Math.abs(myElem.position().top + sign*( (myElem.outerHeight() / 2) - Math.sin(degree)));
This will determine the Y-position of the rotated elements top left corner.
Keep in mind that (myElem.outerHeight() / 2) is the transform-origin of your element. Default is 50% of the elements height and width. If you change the origin, you have to change that value in the formula.
I don't have much time right now to figure out the x-position and provide a more detailed example but i'll update my answer with more tests, details and the x-value when i do find time tomorrow.
Hope this helps
I've implemented zoom on force-directed graph
svg.call(d3.behavior.zoom().on("zoom", rescale))
function rescale() {
var trans = d3.event.translate;
var scale = d3.event.scale;
svg.attr("transform",
"translate(" + trans + ")"
+ " scale(" + scale + ")");
}
Graph can be zoomed in either using mouse wheel or double click on it. I need some advice how to implement zooming out without using mouse wheel.
Shift-double click should zoom out.
If you are on a trackpad-equipped Mac, the zooming gestures are actually the Mac scrolling gestures: Scrolling up with two fingers zooms in, scrolling down with two fingers zooms out - Assuming that the Scroll direction in the Preferences is set to unnatural.
I'm capturing mouse position like this
mouse_move: function(e)
{
mousePos.x = e.pageX - vr.o.context.canvas.offsetLeft;
mousePos.y = e.pageY - vr.o.context.canvas.offsetTop;
},
and it has worked like a dream in all modern browsers while in development, Even tested Wrapping the <canvas/> in a basic dom structure to make sure mouse position adjusted...
obviously now I'm putting it in the actual site it's not working...
You can see here http://jondavidjohn.com/projects/
the mouse position ends up quite a ways south of the actual cursor, anything specifically that could be causing this?
SOLUTION
mouse_move: function(e)
{
mousePos.x = e.offsetX;
mousePos.y = e.offsetY;
},
COPIED FROM: http://simonsarris.com/blog/510-making-html5-canvas-useful
Getting mouse coordinates on Canvas
Getting good mouse coordinates is a little tricky on Canvas. You could use offsetX/Y and LayerX/Y, but LayerX/Y is deprecated in webkit (Chrome and Safari) and Firefox does not have offsetX/Y.
The most bulletproof way to get the correct mouse position is shown below. You have to walk up the tree adding the offsets together. Then you must add any padding or border to the offset. Finally, to fix coordinate problems when you have fixed-position elements on the page (like the wordpress admin bar or a stumbleupon bar) you must add the ’s offsetTop and offsetLeft.
Then you simply subtract that offset from the e.pageX/Y values and you’ll get perfect coordinates in almost every possible situation.
// Creates an object with x and y defined,
// set to the mouse position relative to the state's canvas
// If you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
CanvasState.prototype.getMouse = function(e) {
var element = this.canvas, offsetX = 0, offsetY = 0, mx, my;
// Compute the total offset
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
// Add padding and border style widths to offset
// Also add the <html> offsets in case there's a position:fixed bar
offsetX += this.stylePaddingLeft + this.styleBorderLeft + this.htmlLeft;
offsetY += this.stylePaddingTop + this.styleBorderTop + this.htmlTop;
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
// We return a simple javascript object (a hash) with x and y defined
return {x: mx, y: my};
}
Use e.offsetX and e.offsetY for now instead.
It actually gets more complicated when you introduce some other things, like margins and padding, but offsetX and offsetY will be much more accurate than what you've got to say the least.
I don't have my new "bulletproof-works-in-every-situation" mouse code on me right now, I can get that later for you if you think you'll need it.
edit: Derp! Thanks chopperdave for finally providing the code I forgot to add!
I'm using the following to capture Touch Events on an Iphone.
document.addEventListener('touchmove', function(event) {
event.preventDefault();
var touch = event.touches[0];
$('#touchPosition').text("Touch x:" + touch.pageX + ", y:" + touch.pageY);
}, false);
Strangely, I'm finding that the positions are wrong? the farther to the right I move on the iPhones screen (horizontally or vertically positioned, the more prominent the inaccuracies are.
Any ideas here?
This might be because of styling.
The canvas.width and canvas.height properties define the size of the drawing area.
If you stretch the canvas with css, for example, the coordinates in the canvas will be stretched as well.
Therefore, when drawing, the coordinate you pass will be multiplied by the same ratio your canvas has been stretched.
I'm trying to implement an image zoom effect, a bit like how the zoom works with Google Maps, but with a grid of fix position images.
I've uploaded an example of what I have so far here:
http://www.dominicpettifer.co.uk/Files/MosaicZoom.html
(uses CSS3 transforms so only works with Firefox, Opera, Chrome or Safari)
Use your mouse wheel to zoom in/out. The HTML source is basically an outer div with an inner-div, and that inner-div contains 16 images arranged using absolute position. It's going to be a Photo Mosaic basically.
I've got the zoom bit working using CSS3 transforms:
$(this).find('div').css('-moz-transform', 'scale(' + scale + ')');
...however, I'm relying on the mouse X/Y position on the outer div to zoom in on where the mouse cursor is, similar to how Google Maps functions. The problem is that if you zoom right in on an image, move the cursor to the bottom/left corner and zoom again, instead of zooming to the bottom/left corner of the image, it zooms to the bottom/left of the entire mosaic. This has the effect of appearing to jump about the mosaic as you zoom in closer while moving the mouse around, even slightly.
That's basically the problem, I want the zoom to work exactly like Google Maps where it zooms exactly to where your mouse cursor position is, but I can't get my head around the Maths to calculate the transform-origin: X/Y values correctly. Please help, been stuck on this for 3 days now.
Here is the full code listing for the mouse wheel event:
var scale = 1;
$("#mosaicContainer").mousewheel(function(e, delta)
{
if (delta > 0)
{
scale += 1;
}
else
{
scale -= 1;
}
scale = scale < 1 ? 1 : (scale > 40 ? 40 : scale);
var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;
$(this).find('div').css('-moz-transform', 'scale(' + scale + ')')
.css('-moz-transform-origin', x + 'px ' + y + 'px');
return false;
});
Finally figured it out, check it out here:
http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html
Use the mouse wheel to zoom, you can also drag the image about, only works properly on latest Safari, Opera and Firefox (images are blurry on Chrome for some reason). Also a bit buggy in certain areas. Got a lot of help someone at DocType http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example