I have a problem in JavaScript with map getting stuck in pan mode.
I am using maps in desktop application (in Internet Explorer).
Drag map and take mouse outside of browser control and then release mouse button.
Enter mouse again in browser control, the map is stuck in pan mode -- when I move arrow, map also moves with arrow even while the mouse button is not held down.
How can I stop this from happening?
Related
As a desktop browser user of Google Maps I'd like to switch off the Zooming that occurs every time I use my touch-pad two-finger gesture to scroll up/down.
How do I get hold of the appropriate DOM object handle?
So I can script Greasemonkey (or similar) to set the scrollwheel option to false as shown in this previous answer (which is for developers who use the GoogleMap API on their own sites)
How to disable mouse scroll wheel scaling with Google Maps API
Using the android webview component for show Google Maps through API v3 it seem all the map "engine" is locked until touch is pressed. I tested the default browser also. If I go to the google maps web site and start move the map touching the screen is there always a point where there is a gray area of the map still not loaded. In standard Desktop browser this "missing" part is loaded instantly but under android webview this part remain unloaded for all the time of touch pression. If I stop touch the screen this missing image is loaded. This is a very bad behaviour mainly because the same problem happen also with javascript code. I need to get the google maps api "center_changed" event on real time but cause this problem the event is not delivered for all the time the touch is pressed (moving the map). The event is delivedered only on touch leave. Someone noted this strange behaviour and know a workaround for enable "real time" interaction through javascript code?
Thank you
I have a website that uses CreateJS and canvas. Some objects have associated a click event. Works well in browsers and mobile devices, except in windows surface.
If I zoom in windows surface the click event is lost when the screen moves. Only works well when matched (0,0) to the screen.
Example:
http://intelisen.com/apok/simple.html
Zooming and moving no longer works circle click event.
Any suggestions?
Thank You
I'm developing a web application in Chrome on a Ubuntu touchscreen laptop.
Part of this application requires that the user be able to drag across an element while the application keeps track of the path the mouse makes across the element. This works fine for dragging with the mouse, however when I drag across the element with the touchscreen Chrome just scrolls the whole page.
I tried adding event.preventDefault() into my click() function, however this does not prevent the touch drag scrolling.
var drawing = false;
document.getElementById('canvas').addEventListener('click', function(event){click(event);});
document.getElementById('canvas').addEventListener('mousemove', function(event){if(drawing) click(event);});
document.getElementById('canvas').addEventListener('touchmove', function(event){if(drawing) click(event);});
document.getElementById('canvas').addEventListener('touchstart', function(event){drawing=true;});
document.getElementById('canvas').addEventListener('mousedown', function(event){drawing=true;});
document.getElementById('canvas').addEventListener('touchend', function(event){drawing=false;});
document.getElementById('canvas').addEventListener('mouseup', function(event){drawing=false;});
I need to be able to follow the path the user drags across the touchscreen, without it scrolling the whole page.
I am working on the beginnings of a mobile website intended for the iPad 2, which can be seen here.
When you swipe the red background, it shows the blue background to the right, but resets because no content was chosen. To choose content, one must either: (a) hold the left mouse button over one of the sidebar icons (A through E), then drag to the left more than 72 pixels (any less and it will reset, as it may have been an accidental swipe); or (b) simply click on (or tap) a sidebar icon.
The problem is, while (b) works just fine, (a) doesn't. In Chrome after a short distance (perhaps equal to the minimum swipe distance setting), it shows the "not allowed" cursor and the "mouseup" event is not registered after releasing the left mouse button. You can test out the link above in Chrome for yourself.
Can anybody determine why this is happening? The relevant JavaScript can be seen here.
When you drag a link (<a href="...">) on Chrome, it takes a while (i.e. the mouse must have moved a certain distance) until the drag starts off. When the drag has started, you can drag the URL to somewhere else (e.g. to the tab strip to open it in a new tab), but it prevents you from using drag functionality yourself through scripting.
The solution is to add draggable="false" so that Chrome doesn't exhibit this native drag behaviour:
...