Make jqZoom Evolution's zoom box follow my mouse cursor - javascript

I am using jqZoom Evolution to implement zoom functionality on my site, the problem is that it does not have the functionality for the zoom box to follow my mouse pointer around as I hover over a image, I have tried using mousemove to make it follow the cursor around, but every time I resize the browser the box moves further away from the cursor,
$("#single_main_container").mousemove(function(e){
$(".zoomWindow").css({
top: e.pageY,
left: e.pageX
});
});
so basically I just need the zoom box to follow my mouse cursor around when I hover over the image.

its not following your cursor?
but the 1st demo is showing zoom as you move your mouse
http://www.mind-projects.it/projects/jqzoom/demos.php#demo1
Edit
not exactly a solution but an alternative plugin which provides mouseover zoom out-of-box
http://redeyeoperations.com/plugins/zoomy/

Related

how to trigger a function whenever the mouse on screen

I'm being stuck in a problem
I'm creating something like this: https://www.fariasviolins.com/
My English is not good :3
Specifically, I'm creating a infinity layout, the layout will be moved according to the mouse position(The larger the position, the greater the speed), it means that when the mouse to directions, the layout will be moved. I have tried mousemove and it worked, but I also want the layout still move whenever the mouse on screen(even when the mouse not moving, the the speed will calculate by the position of the mouse), I have tried mouseover, but it didn't work as I expected. please help me huhuhuhhu, thank you so much
I think mousemove is the right way to go!
On the example website you mentioned, it looks like the speed depends on the distance between your mouse and the center of the page.
If you calculate the speed that way, the speed shouldn't change if you don't move your mouse. (Because the distance between your mouse and the center of the page doesn't increase either.)

Openlayers middle mouse button panning

I'm pretty new to Openlayers and I have a problem with map panning using middle mouse button. Basically, I want to use the middle mouse button only for map panning, so that when other tools are selected/used (as identify feature tool) the middle mouse won't be used for selecting (only left mouse button).
Any suggestion?

In D3's zoom behavior, bubble the mousewheel event if maximally zoomed out

I'm using D3's zoom behavior on a large world map.
var zoom = d3.behavior.zoom().scaleExtent([1, 100]);
It works great, providing a natural zoom functionality and disabling the usual scroll activity one expects from a MouseWheel event, as it should.
However, when the map takes up the whole screen, I worry that users will get frustrated if they try to scroll down using the mouse wheel when the map is zoomed all the way out. Is there a way to bubble up to this behavior only in that circumstance?
A good example is the way a scrollable DIV on the page will scroll down when the mouse wheel is used over top of it. But when it reaches the bottom, the page itself resumes scrolling down.
I don't know a lot about event bubbling, but I do see that the D3 zoom behavior does called a d3.event.preventDefault().

Build roulette using jQuery and CSS3 rotation

I'm trying to build a roulette to be controlled by the mouse, I'm not using canvas or svg but only CSS3 rotation and some jQuery.
What I want to achieve is when the mouse is over the roulette and he is clicked and holds down, I want the user to be able to rotate the wheel when he moves the mouse up and down.
I'm using the event.offsetY to get the position of the mouse and according to this position I'm moving the roulette with or against the clock.
The problem is that I think the mouse offset position is changing according to the rotation of the wheel, is their a way to keep the mouse offset position "real" with the document?
-Or-
Someone know a better idea to accomplish that?
Please see the code here: http://jsfiddle.net/MZxgp/ (works on chrome only)
Many thanks!
I used a overlay div that doesn't move to capture the mouse events (see jsFiddle)
I hope this helps

Move Mouse Cursor Javascript

I'm building a joke microsite for a company. They want a feature where the mouse cursor will randomly change position when the user hovers over a certain image.
Is this possible in Javascript? How would I implement it?
Thanks!
You can't... but you can - in a way.
What you can do to mimic this behavior is that you can hide the actual cursor with css cursor: none and then create an image representing the cursor which would look the same and would be placed in position of the real cursor. Then whe user would move the mouse you'd have to update the position of the cursor image and apply your random position changes as you wish - though be aware that when user will scroll outside of the browser content window (on the controls or outside the browser) they will get their mouse cursor back to real position and your cursor will be stuck in its last position.
The only way you could pull this prank out. Good luck with it and hope they'll enjoy it ;)
PS.
inverting the mouse movement direction can be funny as well :>
You can't move the mouse cursor.
You can move the page or the image relative to the position of the cursor, which might make it look like the cursor moved when it didn't?
You can change your cursor with invisible custom icon, and then make a fake cursor and move it.

Categories

Resources