I'm creating a plugin that saves user mouse movements. I would like to create a kind of heatmap where the mouse goes. I don't know how to paint the coordinates in a responsive way. The elements are moving depending on device's width.
I thought that maybe I could create a function in JS that gets the userwidth, Xcoordenate, and Ycoordenate and returns the coordinates depending on the current screen. But, I would need to get (by javascript) which elements changes position from user width to current width. Is it possible? Any advice?
I would think that this is extremely difficult to do correctly.
You could try to store the mouse coordinates relative to the current element the mouse is moving over, but even that has its limits: When the page width changes the width and height, and even the content, of an element could change.
I think it would be better to only register over which element the mouse cursor is. Then it doesn't matter what shape an element has, or where it is.
See: Determine which element the mouse pointer is on top of in JavaScript
Related
after several days of researching and trying I want to see if you can help me.
I have a graph (coord) and students should mark the extrema of the graph. I have to use JavaScript for this and work in XHTML 1.0 Strict//EN. The idea was that the student clicks on the position on the graph where he/she thinks an extremum lies, this triggers a JavaScript function (addPoint) which adds an img into the same div in which the graph lies (coordDiv) and gives it the position where the student clicked. For an example visit http://ourresidence.net/JavaScript/ where you should be able to view both the site code and the JavaScript code.
As far as I understood, the positioning has to be absolute. static and fixed are incompatible with the desired behaviour and relative would be very difficult because 1. I don't know where the next "ordinary" positioning would be and 2. it would get more complicated with a student deleting a point. So, absolute it is.
Then the positioning should be absolute relative to the div coordDiv and after some time I even figured out how to give the div a concrete dimension (through it's a bit static, the approach with adjustCoordDiv() in klausur.js hasn't work out). However, if I resize the bounderies of the browser, the div and the graph wanders (since they are centered) but the point does not. That needs to be fixed.
And reading how mixed up the acknowledgement of zooming is in different browsers by now I've already completely given up handling zooming in the exercise, but if you come with a solution for that too, my praise would know no end.
Positioning is relative to some containing element in HTML that is positioned itself. If there isn't any such element, positioning is relative to document's body (as in your case). Positioning basically means to have applied some other position in CSS than static.
So you basically need to subordinate your click points to the DIV containing the whole coordinate system (as you do now ). That div should have
position:relative
without any repositioning to position it and to start a new "local coordinate system" for using
position:absolute
on any subordinated element.
On clicking, coordinates of that click need to be converted from global coordinate space to local one. This might be achieved iterating from clicked element to document element using properties offsetParent, offsetTop and offsetLeft of each passed element.
I am implementing a simple map. The map consists of a viewport, and the map image itself, which is actually a div with a background image.
The viewport is relatively positioned and it's overflow is hidden, and the map image is absolutely positioned within the viewport.
The map can be moved with the mouse within the viewport and the map can also be zoomed (just increasing the size of the image as the image is a .svg)
The map has points on it which the user can hover over to get a description in a tooltip of the point. The points can also be focused by tabbing to them.
Points are children of the map image div and are absolutely positioned by percentage (to retain the correct position when the map is zoomed)
When a point is focused, I want to move the map so that the point is in the middle of the viewport. I have written the code for this and it works fine. However, if a point is outside of the viewport (not visible) then the browser automatically tries to move the map so the point is visible. I don't want it to do this, as it is interfering with the code I have written to animate the map move. This is nothing to do with scrolling.
I am using jQuery and have tried e.preventDefault() and return false; in the focus handler for the map points but neither work.
Is preventing this behaviour even possible?
Thanks in advance
I have found out that the scroll value of the map viewport was being set by the browser in order to bring the map point into view. As I am moving the map by setting it's top and left positions, this is what was causing the issue.
The solution was to add the .scroll() event listener to the viewport and just set the scrollTop and scrollLeft values to 0 when the event is triggered
I'm trying to programmatically zoom in on what I'm seeing on the page, without changing which part of the content I'm seeing, regardless of where the scroll level is. I want this to be animated and pretty.
So I'm using $('body').animate({zoom:2.0}, 1000) to animate the zoom, but this has the irritating side effect of keeping the top of the visible window at the same point in the document (the browser's attempt to keep me where I was, actually, complete failure), so I need to basically continuously scroll to the same relative vertical center of the page as it's animating in order to get around that. How can that be done? I don't know how to do two things at once with animation--- I mean I could change multiple CSS properties at once, but how can I scroll?
Essentially, it needs to do something like this:
Call begin zoom animation:
1.Mark height level of any element that appears at center of window
2.Do one step of zoom animate
3.Scroll so that that element's height level relative to center of window is unchanged
4.Repeat until animation is complete
You can using Panzoom component for your goal.
I am utilizing jQuery's draggable functionality. The viewport div is the entire window size. There is a draggable container div within the viewport which is much larger than the viewport itself giving the feel of looking through a window to see small portions of the container. The container holds object divs which are also draggable.
Currently, I have the container div dragging properly and I have the object divs dragging around the viewport div properly as well. The issue I am having is I want to "push" the viewport around if an object div comes within a particular pixel range of the edge of the viewport div.
JQuery's draggable function has a drag event which I have been trying to utilize on the objects. I can get the viewport to scroll but, it requires the mouse keep the object moving at all times to keep the scroll going. I am looking to have the object get within the pixel range and be able to not move the mouse but, still scroll. I am at a loss at the moment as I cannot seem to find any solution that really fits my requirements. Any help would be greatly appreciated and rewarded with my gratitude.
To see an example of what I am doing, please visit http://jsfiddle.net/trVZA/10/. When the red box is dragged, the black object will drag around. I have commented out my code on the drag event for the object as it will completely freeze the browser but, it is there for you to see my mistake. When the object gets close to a wall I want the background water image to scroll around.
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.