Develop Reference

Triple-tap Detection on Mobile

I'm attempting to implement a triple-tap to escape feature like that on The Trevor Project's Website. It works perfectly on laptops and desktops with a mouse. However, I'm running into problems detecting the triple-tap on mobile browsers because after the first two taps, mobile browsers register it as a double-tap and zoom in and doesn't register the triple tap. I've tried various implementations of preventDefault() and setTimeout(), but nothing seems to work. I've spent hours googling and trying different fixes, none of them work.
Before you answer, I know about disabling double-tap zoom through touch-action: manipulation in CSS, but that doesn't work in newer versions of Safari iOS, and I need this to support all browsers.
Here's what the code looks like, without any of the methods I've tried to fix the issue. The click part works, just not the tap version.
window.addEventListener('click', function (event) {
if (event.detail === 3) {
window.location.replace("http://google.com");
}
});
window.addEventListener('touchstart', function (event) {
if (event.detail === 3) {
window.location.replace("http://google.com");
}
});
I'm desperate, does anyone have a remedy for this?

To keep all events as they are, I suggest not using or altering them and just counting the clicks/taps and resetting if the user takes too long in the third one. The code would look like this:
let numberOfClicks = 0;
//just to show in screen
const clicksText = document.getElementById("clicks");
function secondsResetClick(seconds){
setTimeout(function(){
numberOfClicks = 0;
},seconds*1000)
}
//This is for click, but it would work in any listener
window.addEventListener('click', function () {
numberOfClicks += 1;
clicksText.textContent = numberOfClicks;
if (numberOfClicks === 3) {
numberOfClicks = 0;
clicksText.textContent = 'Third Click!';
}else if(numberOfClicks == 2){
// Define the seconds to wait
secondsResetClick(1);
}
//Just to show this example
});
<span id="clicks">0</span>

HighCharts/HighStocks not scrolling on mobile

Hi, particulary I am having a problem with HighCharts / HighStock not scrolling on the x-axis to display hidden data such as the times contained here:
It works just fine in Chrome browser on my Desktop. Whenever I scroll the overthrow-polyfill.js error shows itself. This is not a library I included myself as I can't find any mention of overthrow in all my code.
Sidenote: I do have angular touch and fastclick in the mix as well, but removing them did not help either

I've got the same problem on mobile device. After couple of hour i have found that scrolling is available just on mousemove event, but not on touch event. To fix this I have added the same listeners on touch events.
Highcharts.Pointer.prototype.onContainerTouchStart = Highcharts.Pointer.prototype.onContainerMouseDown;
var onContainerMouseMove = Highcharts.Pointer.prototype.onContainerMouseMove;
Highcharts.Pointer.prototype.onContainerTouchMove = function(e) {
onContainerMouseMove.call(this, e);
if ("touchstart" === this.chart.mouseIsDown) {
this.drag(e);
}
};

Android 4 Chrome hit testing issue on touch events after CSS transform

I'm having issues with the combination of CSS transforms and touch event hit testing. This only reproduces for me in Chrome on Android 4 (stable and beta). iOS Safari, as well as Chrome desktop with touch emulation both appear to be working fine.
I'm almost positive this has to be a bug, so I think I'm mostly looking for workarounds here.
The issue is that hit testing for touch only seems to work for where the element was before the transform, not the final position. You can see an example on my jsfiddle (only on Android 4 Chrome):
jsfiddle: http://jsfiddle.net/LfaQq/
full screen: http://jsfiddle.net/LfaQq/embedded/result/
If you drag the blue box half way down the screen and release it will snap back to the top. Now, if you try dragging from the top half of the page again, no touch will register. The touch events aren't even fired on the element. However, if you attempt to touch the bottom of the element, it works fine. You can then try moving it up from the bottom, and observing that hit testing no longer works on the bottom, but works on the top.
This is how I'm handling the events:
function handleTouch(e) {
console.log("handle touch")
e.preventDefault();
switch(e.type){
case 'touchstart':
console.log("touchstart");
touchOriginY = e.targetTouches[0].screenY;
break;
case 'touchmove':
console.log("touchmove");
el.innerHTML = e.targetTouches[0].screenY;
var p = e.targetTouches[0].screenY - touchOriginY;
el.style[TRANSFORM] = 'translate3d(0,' + p + 'px' + ',0)';
break;
case 'touchcancel':
console.log("touchcancel");
// Fall through to touchend
case 'touchend':
//console.log("touchend");
//el.style[TRANSITION] = '.4s ease-out';
el.style[TRANSFORM] = 'translate3d(0,0,0)';
break;
}
}
el.addEventListener('touchstart', handleTouch);
el.addEventListener('touchend', handleTouch);
el.addEventListener('touchmove', handleTouch);
el.addEventListener(TRANSITION_END, function(e) {
console.log("transition end")
el.style[TRANSITION] = '';
});
I don't have any problems with the transforms in touchmove, as those aren't new touches to be detected anyways.
Any suggestions?

This is an unusual bug in Chrome.
Essentially the hit targets for an element is recorded during a layout pass by the browser. Each time you set innerHTML, the browser will relayout and the last time this is done, is before the touchend event is fired. There are a couple of ways around it:
OPTION 1: You can set a touch handler on the body element and check the target of touch event to see if it is touching the red block. Tip of the cap to Paul Lewis for this approach.
http://jsfiddle.net/FtfR8/5/
var el = document.body;
var redblock = $('.splash-section');
function handleTouch(e) {
console.log("handle touch")
if(e.target != redblock) {
return;
}
....
OPTION 2: Set an empty touch callback on the document seems to fix the problem as well - according to some of the linked bug reports, this causes the hit testing to be done on the main thread which is a hit on performance but it properly calculates the hit targets.
http://jsfiddle.net/LfaQq/2/
document.body.addEventListener('touchstart', function(){});
OPTION 3: Set innerHTML after the transition has ended to force a relayout:
el.addEventListener(TRANSITION_END, function(e) {
console.log("trans end - offsettop:" + el.offsetTop);
el.style[TRANSITION] = '';
el.innerHTML = 'Relayout like a boss!';
});
I've created a bug report here and Rick Byers has linked to a related bug with additional info: https://code.google.com/p/chromium/issues/detail?id=253456&thanks=253456&ts=1372075599

In Javascript FireFox does not allow resizing div by dragging

I have a div with border and in its right-bottom corner I have image for resizing:
So when user presses mouse on the image, he (or she) can drag mouse and resize the div.
This works fine in all browsers but FireFox.
In FireFox something strange happens: after the user presses mouse and starts dragging, the cursor changes to:
So the cursor changes to this one and mouse move events are not coming, when the mouse is dragged.
I am wondering, what causes this behaviour. I thought maybe FireFox thinks that the user is trying to select text by pressing and dragging the mouse. But I cancelled text selection using this code:
resizeImageImg.onselectstart = "return false;";
resizeImageImg.ondragstart = "return false;";
resizeImageImg.style.WebkitUserSelect = 'none';
resizeImageImg.style.KhtmlUserSelect = 'none';
resizeImageImg.style.MozUserSelect = 'none';
resizeImageImg.style.MsUserSelect = 'none';
resizeImageImg.style.OUserSelect = 'none';
resizeImageImg.style.UserSelect = 'none';
resizeImageImg.setAttribute ("unselectable", "on");
resizeImageImg.setAttribute ("draggable", "false");
(for both: the div and the resize image)
But this did not solve the problem. FireFox still does not let resizing and changes cursor to "not-allowed".
Can anybody please help?

Thank you all, I found the solution.
I replaced:
resizeImageImg.ondragstar = "return false;";
by
resizeImageImg.ondragstart = function () { return false; };
and it started working in FireFox as well.
What happens here is that if you want to process mouse-move events when your mouse-down event came from an image, then you have to make you image not-draggable. But this is not enough to use
resizeImageImg.setAttribute ("draggable", false);
(at least in FireFox) becasuse events ondragstart are still coming. I understood this when I set:
resizeImageImg.ondragstart = function () { alert ("ondragstart"); return false; };
So I realized that FireFox does not obbey setAttribute ("draggable", false) - whilst other browsers do.

Andy, here is the solution I have come up with. I have gone to great effort to make it quick and easy to use.
You can view the file here:
http://files.social-library.org/stackoverflow/imageResizer.html
It is simple to use. Create your image and specify a width and height. Then, once the page loads call the function imageResizer.init(imageObject) sending the image object as a parameter. It will then set the image up with the dragger.
This works in firefox, chrome and internet explorer 8+.

assigning dynamic cursor style to element using jquery in Opera

I'm trying to dynamically change the cursor style when the mouse is over an element. The cursor should be either "move" or "default" depending on a boolean returned by a method.
The code is something like this:
$("#elemId").mousemove(function(event) {
if(cursorShouldBeMove()) {
$(this).css({'cursor':'move'});
} else {
$(this).css({'cursor':'default'});
}
}
This code works like a charm in IE8,FF3,Chrome and Safari.
Only Opera fails to handle it correctly.
I'm using Opera 9.6.4
Does anyone have an idea how to solve this?
I prepared a sample for testing;
var cursorStatus = true;
setInterval(function() { cursorStatus = !cursorStatus; }, 500);
function cursorShouldBeMove() {
return cursorStatus;
}
$(function() {
$("#elemId").mousemove(
function(event) {
$(this).css("cursor", cursorShouldBeMove() ? "move" : "default");
}
);
});
If you move your mouse from outside of #elemId to inside of it for a few times you will see that the cursor will change. But if you position your mouse in #elemId and move your mouse, cursor not changes.
The code is very simple. I think it's a bug of Opera.
I tested this code also with;
Firefox 3.5.1 (worked)
Internet Explorer 7 (worked)
Google Chrome 2.0 (worked)
Safari 3.2 (worked)
(Windows versions)

Opera is real funny with cursors. I find that you have to move the mouse over the element twice before it actually works.
Can see here that you need to hover over the Hello World twice to get the cursor to change.
Same issue described here