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
Related
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
I'm creating a mapping app that places a marker image on a canvas and scrolls to it. I'm using the browser's pinch zooming and scrolling to zoom in/out of the map. However, I've noticed that there's some bizarre behavior, and I'm wondering how to get around it.
This is a little tough to explain, but here we go.
Let's imagine that you're at the standard zoom level on a webpage (you can't zoom out any further). Let's imagine that the area your browser window is showing is the "invisible box". There's some stuff you can see, and some stuff that's out of view (that you need to scroll to get to). Once you pinch-zoom in, the browser still pretends that your viewport is still at 100% zoom (i.e. Your browser is essentially cropping into that invisible box, but the invisible box stays in the same place.) Any JS on the page sees the scroll position as the same, no matter where you pan around within the invisible box. However, once you scroll to the edge, you start to push the edges of the invisible box. If you use JS to set the scroll position (window.scrollTo(xPos, yPos)), it sets the position of the invisible box, but the portion of the invisible box you see is still relative. This means that if you set the scroll position to (0,0) and your cropped-in view is not at the precise top left of the invisible box, the portion you see will NOT be at (0,0).
The issue I'm having is that I need to move the zoomed-in view to a specific spot. Since setting the position of the invisible box isn't really working, is there a way to force the browser to get rid of the invisible box, pinch-zoom all the way out, or maybe detect where the zoomed-in portion is within the invisible box? I'm stumped.
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 have a map that is position:fixed on my page. So when I scroll down it stays with you on the page When I roll over the pinpoints on my map the InfoBox displays in the correct position, but when I click one of my results which triggers the Infobox to display it is relative to where the map was when the page loaded (so usually high up on the page and not down where I scrolled it). I am trying to manipulate where the info box displays using the ShowInfoBox, but it always needs LatLong Coordinates instead of pixel coordinates. Since the map moves up and down the page the pixel location could change depending on how far you scroll.
Right now I am just poitioning it with javascript after it loads but that is a less then ideal situation as I run into all sorts of problems.
It's probably a bug with Bing Maps that it doesn't position the infobox correctly. You'll have to work around it. The infobox most likely has a unique ID or a unique class that you could select. Using that you can manipulate the infobox once you set the new Lat/Long position.
When you display the infobox, after you call the show method with the Lat/Long you should then reposition the infobox using CSS based on the scroll positon. So, if the page has scrolled down 100 pixels you need to add 100 pixels to the "top" css property. The same goes for the "left" property. This should always result in your infobox appearing in the correct place.