It seems that 'swipeup' and 'swipedown' events are not fired consistently. Is this a known issue?
I'm testing this pen on OSX/Chrome with a mouse: http://codepen.io/felixturner/pen/RWbPoN
var mc = new Hammer(myElement);
//enable all directions
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
// listen to events...
mc.on("swipeup swipedown swipeleft swiperight tap press", function(ev) {
myElement.textContent = ev.type + " gesture detected.";
});
Thanks!
Lowering the threshold and velocity fixed this issue:
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL,
threshold: 1,
velocity:0.1
});
Related
I add markers to the map and place them in the markercluster. For markers that are not clustered, I want to show the tooltip that I attach to the marker when I create it.
var geoMarkers = L.markerClusterGroup({ removeOutsideVisibleBounds:true, chunkedLoading: true, chunkProgress: this._updateProgress });
//start loop create markers
var marker = new L.marker(latlng, { icon: icon } );
marker.bindPopup(L._("Loading.."));
marker.bindTooltip(' text ');
geoMarkers.addLayer(marker);
//end loop
map.addLayer(geoMarkers);
map.on('layeradd', function(event) {
var layer = event.layer;
if (layer instanceof L.Marker && !(layer instanceof L.MarkerCluster)) {
layer.openTooltip();
}
});
To do this, I followed advice and listen for the layeradd event. When loading the map and moving to new markers, everything works. However, at any movement of the map, on those markers where the tooltip is already open, it is closed, since the layeradd event does not affect them. There is only one way to see the hint on them again - to zoom out so that the marker "hides" in the cluster and then again increasing the scale, I see the hint again. It is desirable that it be always present when the marker is not hidden in the cluster.
I ask for help or hints.
You can use the permanent tooltip option in order to maintain the visibility of your marker. Check here for official docs.
...
var geoMarkers = L.markerClusterGroup({ removeOutsideVisibleBounds:true, chunkedLoading: true, chunkProgress: this._updateProgress });
//start loop create markers
var marker = new L.marker(latlng, { icon: icon } );
marker.bindPopup(L._("Loading.."));
marker.bindTooltip(' text ', { permanent: true} ); // here define it
geoMarkers.addLayer(marker);
//end loop
I'm attempting to receive three types of tap events using hammer.js
single tap with one finger
double tap with one finger
double tap with two fingers
How can I set this up correctly in hammer.js
Here is what I currently have:
if (mc == null) {
mc = new Hammer.Manager(el);
}
mc.set({ touchAction: "none" });
//mc.get("swipe").set({direction: Hammer.DIRECTION_ALL, pointers: 2});'
//mc.get('tap').set({enable: false});
var singletap = new Hammer.Tap({
event: "singletap",
taps: 1,
pointers: 1
});
var doubletap = new Hammer.Tap({
event: "doubletap",
taps: 2,
pointers: 1
});
var twodoubletap = new Hammer.Tap({
event: "twodoubletap",
taps: 2,
pointers: 2
});
mc.add([twodoubletap, doubletap,singletap]);//, twotap, threetap]);
twodoubletap.recognizeWith([doubletap,singletap])
doubletap.recognizeWith([singletap,twodoubletap])
//doubletap.requireFailure(twodoubletap);
singletap.requireFailure([doubletap,twodoubletap]);
mc.on("twodoubletap doubletap singletap", binding.value);
I can get a single tap to fire consistently and a one finger double tap sometimes.
The two-finger double tap either does not fire, or fires along with a one other taps following it immediately.
Ideally, I would like each type of tap to fire consistently.
I was able to get this to work by doing three things.
1. I added dropRequireFailure to the two-fingerdouble tap for the other taps
2. I made the thresholds larger in the events.
3. I added a time-based filter in the event handler that rejects taps too close to each other. I know this isn't ideal but it works for now.
if (mc == null) {
mc = new Hammer.Manager(el);
}
mc.set({ touchAction: "none" });
//mc.get("swipe").set({direction: Hammer.DIRECTION_ALL, pointers: 2});'
//mc.get('tap').set({enable: false});
var singletap = new Hammer.Tap({
event: "singletap",
taps: 1,
pointers: 1,
interval: 500,
threshold: 200,
posThreshold: 200
});
var doubletap = new Hammer.Tap({
event: "doubletap",
taps: 2,
pointers: 1,
interval: 300,
threshold: 200,
posThreshold: 200
});
var twodoubletap = new Hammer.Tap({
event: "twodoubletap",
taps: 2,
pointers: 2,
interval: 400,
threshold: 500,
posThreshold: 200
});
mc.add([twodoubletap, doubletap,singletap]);//, twotap, threetap]);
twodoubletap.recognizeWith([doubletap,singletap])
doubletap.recognizeWith([twodoubletap])
doubletap.requireFailure(twodoubletap);
singletap.requireFailure([doubletap,twodoubletap]);
twodoubletap.dropRequireFailure(doubletap);
twodoubletap.dropRequireFailure(singletap);
mc.on("twodoubletap doubletap singletap", handler);
Then at the top of the event handler:
let now = Date.now();
if((now - lastTap)<500){
return;
}
lastTap = now;
I'm having trouble stopping a tween in three.js, using tween.js.
The docs state to use tween.stop(), but that doesn't seem to work.
Example here:
http://jsfiddle.net/feLzjzy9/1/
As you hover with the mouse over a box, it starts to change color. This animation takes 10 seconds, but I try to stop it just to test the .stop() feature using setTimeout(function(){ tween.stop() }, 1000);but it doesn't do a thing...
Any help is much appreciated!
There is Reference problem and update problem.
I made some changes in you code. It is not a solution, you can use each change individually.
Best solution is to make each tween as var inside a function, integrate counting in tweened objects and use onUpdate(function(){if(this.counter > 1000){tween.stop}}) (INTERSECTED.material.color) because you creating a lot of unrefferenced timers and tweens, which will be a performance problem.
function animate() {
//
TWEEN.update();
//
}
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
INTERSECTED = intersects[0].object;
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
//INTERSECTED.material.emissive.setHex(0xff0000);
TWEEN.remove(tween);
tween = new TWEEN.Tween(INTERSECTED.material.color).onStart(function(){
setTimeout(function(){ tween.stop() }, 1000); ///not good
}).start();
.to({r: 0, g: 25, b: 155}, 10000) /// here set correct time
.easing(TWEEN.Easing.Quartic.In)
.start();
setTimeout(function(){ tween.stop() }, 1000);/// will not work if you create anoter it that one second
}
else {
if(tween) tween.update(time); // bad
}
}
I am trying to add swipe and press support to an img using Hammer js version 2.0.4 and I have noticed that it does not work well on Desktop IE11. The gestures are triggered maybe once for every 20 attempts.
Here is a jsfiddle with an example.
http://jsfiddle.net/bhptL6mf/32/
$(function() {
var myImg = document.getElementById("myImg");
var blue = document.getElementById("blue");
var hammerManager = new Hammer.Manager(myImg);
var panRecognizer = new Hammer.Pan({
threshold: 0,
pointers: 0
});
hammerManager.add(panRecognizer);
var swipeRecognizer = new Hammer.Swipe({
threshold: 0,
velocity: 0.01
});
hammerManager.add(swipeRecognizer).recognizeWith(hammerManager.get('pan'));
hammerManager.on('swipe', function(event) {
if (event.type == 'swipe') {
($(blue).text() === "Swiped") ? $(blue).text(" "): $(blue).text("Swiped");
}
});
})
Anyone else seeing this issue and know of a workaround? I am also seeing the same issue when gestures are applied to anchors
Setting img attribute draggable to false will fix this on IE.
Also noticed a similar issue on Desktop Fire Fox and had to set -moz-user-select to none and prevent dragstart event in addition to setting draggable to false to fix it.
I've created an app where I use several custom HTML pushpins. Each one of these pushpins has a click event that will call setView on the map to center the map on the selected pin. This works perfectly in all browsers except for Firefox (testing version 22.0).
In Firefox, after the setView animation completes and the map is centered on the pushpin, the pushpin is then offset horizontally, vertically or both by a certain amount of pixels. The amount seems to correspond with amount of pixels the map has moved. If you then drag the map manually with the mouse, upon releasing the mouse button, the pushpin snaps back to its proper place. I've checked the top and left position values of the MapPushpinBase anchor tag in compared it with other browsers and the values differ.
Unfortunately, I cannot post a live example because the product has not yet been publicly released. But see below for the code I'm using.
this.clickHandlers.push(Microsoft.Maps.Events.addHandler(node, 'click', function (e) {
var element = $(e.target._htmlContent);
self.nodeHitboxHandler(element);
}));
Within the nodeHitboxHandler function, the only piece of Bing Map code is this:
this.map.setView({
center: new Microsoft.Maps.Location(panStart.latitude, panStart.longitude),
zoom: this.zoom,
mapTypeId: Microsoft.Maps.MapTypeId[self.mapTypeId]
});
Thanks in advance for any help.
UPDATE:
In order to make things clearer, I've created a simple example that demonstrates the problem. You can see it here: http://ginof.com/tests/bing/
In Firefox, try clicking on the different pushpins and watch the behaviour of the pushpin you've just clicked on after the map finishes panning to its new location. The map works fine in all browsers except Firefox.
Here's the complete JavaScript code for this example:
$(document).ready(function () {
var map = null,
initialCoordinates = {latitude: 40.71435, longitude: -74.00597},
initialPoint = new Microsoft.Maps.Location(initialCoordinates.latitude, initialCoordinates.longitude),
range = {
top: 3,
right: 5,
bottom: 0.01,
left: 5
},
mapOptions = {
credentials:"BING-MAPS-API-KEY",
disableKeyboardInput: true,
disableZooming: true,
enableClickableLogo: false,
enableSearchLogo: false,
showBreadcrumb: false,
showDashboard: false,
showMapTypeSelector: false,
showScalebar: false,
inertiaIntensity: 0.5,
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
labelOverlay: Microsoft.Maps.LabelOverlay.hidden,
center: initialPoint,
zoom: 14
};
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
// Create nodes
map.entities.clear();
var pushpinOptions,
pushpin,
nodeCoordinates;
for (var i = 0; i < 5; i++) {
pushpinOptions = {width: null, height: null, htmlContent: '<div id="node' + i + '" class="node">' + i + '. Custom HTML</div>'};
nodeCoordinates = {latitude: initialCoordinates.latitude + i * 0.005, longitude: initialCoordinates.longitude + i * 0.005};
pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(nodeCoordinates.latitude, nodeCoordinates.longitude), pushpinOptions);
pushpinClick = Microsoft.Maps.Events.addHandler(pushpin, 'click',
(function () {
var nodeId = i,
homeCoordinates = nodeCoordinates;
return function () {
console.log("node " + nodeId + " clicked.");
map.setView({center: new Microsoft.Maps.Location(homeCoordinates.latitude, homeCoordinates.longitude)});
}
})()
);
map.entities.push(pushpin);
}
}
GetMap();
});
Thanks again for any help.
This is a known issue which I was able to reproduce an has been escalated to the development team. Note that the Bing Maps forums are the best place to report these types of issues. You can find a similar thread on this topic here: http://social.msdn.microsoft.com/Forums/en-US/f77e6a80-2e0f-44c3-81cc-edb4c2327016/custom-html-pushpins-in-firefox-not-positioned-correctly