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>

How to call two different JavaScript functions, one for desktop version and one for mobile version on a same onclick event attribute in html?

I have a responsive HTML page for desktop and mobile version. And I have two functions, one is for the desktop version and one is for the mobile version. Both functions are on the same onclick event attribute in a div. I want one function to be executed at a time according to the width of the device i.e., if the width of the screen is greater than 425px then the function for the desktop should be executed and if it is 425px or less then the function foe the mobile version should be executed. Found different answers on StackOverflow like window.matchMedia() etc But it is not working for me.

Try window.innerWidth <= 425 for detecting mobile.
Some fun things you can do with this and global getters:
Object.defineProperty(window, 'mobile', {
get() {
return window.innerWidth <= 425;
}
})
function SomeFunction() {
if (mobile) {
alert('im on mobile!')
} else {
alert('on a tablet, laptop, or desktop!')
}
}

How to open fullscreen video on tap for mobile browsers

I figured out how to make a video full screen on click for desktop devices, however, the same code doesn't work on mobile devices. How can I make it work for mobile screens as well? This is my js code:
<script>
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
myVideo.play();
}, false);
</script>

The fullscreen API is not supported for all mobile devices. https://caniuse.com/#feat=fullscreen
You can use Screenfull to avoid all the checks and complexities to handle the fullscreen experience. It exposes a property isEnabled which tells you if you are allowed to enter fullscreen. You can request fullscreen based on its value.

Maybe you got a 'playsinline' in your Videotag?
Just remove it
myVideo.removeAttribute('playsinline');

Javascript Mobile sites

I am using the following javascript to detect whether the site is viewed on a mobile device it works perfectly as a redirect (see example 1);
However, is it possible to amend it to so it amends the font size of an element or class (the original font-size is contained within an external style sheet) when the same condition is satisfied, that being a iDevice is detected.
//original code: (Javascript)
// iDevice
var iDevice = {
// Android
Android: function() {
return navigator.userAgent.match(/Android/i);
},
// Blackberry
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
// Apple
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
// Opera Browser
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
// Windows Mobile
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
// Function: (iDevice)
any: function(){
return (iDevice.Android() || iDevice.BlackBerry() || iDevice.iOS() || iDevice.Opera() || iDevice.Windows());
}
};
<!-- Working HTML -->
{
if( iDevice.any() )
window.location = "http://www.stackoverflow.com";
}

One possible solution would be to modify the JavaScript so that it adds one or more custom classes to the 'body' element in your HTML based on the device agent. Then, in your CSS, you could do something like this:
.header {
/* default font size */
}
.android .header,
.iphone .header
.mobile .header {
/* custom font size */
}
However, a better solution might be to forgo user agent detection and instead use media queries to make your website responsive based on the actual width of the device the user is using to view your website.

Your code will not work on any device that you haven't explicitly enumerated. For example, why don't you support Firefox OS?
Of course you can try to enumerate every single mobile device ever produced (and keep doing that to keep your code working for new devices) and change the font size for the detected mobile devices (that you know about) but it would be much better to use responsive web design for things like that.
You can use a framework like:
Bootstrap
Foundation
or many others, or to use CSS media queries yourself if you don't want to use those frameworks.
See: Media Queries for Standard Devices on CSS-Tricks.

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