how to detect triple click on website on ios device? - javascript

I have to show and hide a div on triple click on body of my website in mobile devices
the below code that I wrote in JavaScript is work fine in android devices but it doesn't work in IOS.
so would you please help me to resolve it?
the code is :
window.onload = function() {
document.querySelector('body').addEventListener('click', function(evt) {
evt.preventDefault();
if (evt.detail === 3) {
document.getElementById('mmu').style.height = '100px';
}
if (evt.detail === 1) {
document.getElementById('mmu').style.height = '0px';
}
});
}
#mmu {
width: 100px;
height: 0px;
position: fixed;
left: 0;
cursor: pointer;
top: 0;
background: red;
}
body {
height: 1000px;
background: #eee;
width: 100%;
cursor: pointer;
}
<div id="mmu"></div>

On iOS, the click event doesn't fire normally. Instead you will need monitor touch events such as touchend to check how many taps are made.
For example you might try to check if the taps are made within a sufficient timeout window like so
TOUCH_TIMEOUT_MILLISECONDS = 500
touch_count = 0
window.onload = function () {
document.querySelector('body').addEventListener('touchend', function (evt) {
touch_count += 1
setTimeout(function () {
touch_count = 0
}, TOUCH_TIMEOUT_MILLISECONDS);
if (touch_count === 3) {
document.getElementById('mmu').style.height = '100px';
}
if (touch_count === 1) {
document.getElementById('mmu').style.height = '0px';
}
evt.preventDefault();
});
});
Depending on what your requirements are you may also need to account for touchend and click events firing from the same action.

Related

How to check if a key (on the keyboard) is being held down?

Basically title. I need a function which works kind of like a crouch button - the character crouches only when the down arrow key is being HELD, not only pressed once. How do I make it work? Here is what I have tried but it doesn't work. Thanks in advance!!!!!
document.onkeydown = function (event) {
let key = event.key;
while (key == "ArrowDown") {
character.style.width = 50 + "px";
character.style.height = 30 + "px";
character.style.top = 115 + "px";
}
}
keydown event is continuously fired when you hold down any key and when you release the key, keyup event is fired.
To achieve what you are trying to do, add the styles to the character when keydown event is fired and on keyup event remove those styles from the character.
Following code snippet shows an example:
const character = document.querySelector('.character');
document.body.addEventListener('keydown', (event) => {
character.classList.add('crouch');
});
document.body.addEventListener('keyup', (event) => {
character.classList.remove('crouch');
});
div {
width: 100px;
height: 100px;
background: yellow;
position: relative;
}
.crouch {
height: 50px;
top: 50px;
}
<div class="character">Press any key</div>

When modal popup is open, prevent mobile "Back button" to quit the site, close the popup instead

When a modal popup dialog is opened, even if I add a close button (usually a X on top right), some users on mobile will use their mobile "Back button" to close the popup. But instead this will quit the site!
How to make the mobile "Back button" close the popup instead of exiting the website?
document.getElementById("link").onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
<div id="main">
Click me<br>
</div>
<div id="popup">This is a popup window! Click mobile "Back button"</div>
<div id="popupdarkbg"></div>
Notes:
I've already seen this Codepen How to disable browser back button using JavaScript, but I'm not sure it it's cross-browser on Chrome, Firefox, Safari and on Android, iOS, etc.
I've already seen answers about window.onpopstate = function () { history.go(1); }; but I want to make sure this is the good practice to do it here, (so it's not a duplicate of them).
Here's a rough version of how I do it in my apps:
var showModal = function() {
// some code here to show the HTML elements...
window.history.pushState('backPressed', null, null);
window.history.pushState('dummy', null, null);
window.addEventListener('popstate', hideModal, { once: true });
};
var hideModal = function(event) {
if (event.state == 'backPressed') {
// hide the HTML elements
}
};
The reason I add two dummy states is because the popstate event also fires when the URL hash changes, e.g. when the user overwrites the hash manually in the address bar. Checking if the current history state matches backPressed lets me verify that the event was indeed triggered by the Back button.
Here is a minor variation of the accepted answer (*), that I'm finally using:
window.history.pushState('popupclosed', null, null); // initial state: closed
var hideModal = function(event) {
if (event.state == 'popupclosed') {
closepopup();
}
};
var showModal = function(event) {
if (history.state !== 'opened') {
window.history.pushState('opened', null, null);
}
window.addEventListener('popstate', hideModal, { once: true });
The difference with (*) is that here:
we only add 1 new state per popup opening in the browser history, instead of 2
in the case the previous popup was closed with the X top-right button of the popup (but not using "Previous in history" browser button or "Back button" on phone), then when opening a second popup, don't recreate a new history state opened because it's already the current state.

Javascript -- how to click anywhere on page to hide opened div

I have a javascript that opens up a hidden div:
<script>
function dropdown()
{ document.getElementById("login_dropdown").style.display="block"; }
</script>
The html is:
<div onclick="dropdown()">
<div id="login_dropdown">STUFF</div>
</div>
The CSS is:
<style>
#login_dropdown {
width: 150px;
display:none;
}</style>
Using javascript alone, how can I hide this div when I click anywhere else on the page, excluding the opened DIV itself.
Something like this with vanilljs
document.addEventListener('click', function(event){
const yourContainer = document.querySelector('....');
if(!yourContainer.contains(event.target)) {
//hide things classes.. yourContainer.classList.add('hidden');
}
});
You could do this
var elem = document.getElementById("login_dropdown");
(document.body || document.documentElement).addEventListener('click', function (event) {
// If the element on which the click event occurs is not the dropdown, then hide it
if (event.target !== elem)
elem.style.display="none";
}, false);
function closest(e, t){
return !e? false : e === t ? true : closest(e.parentNode, t);
}
container = document.getElementById("popup");
open = document.getElementById("open");
open.addEventListener("click", function(e) {
container.style.display = "block";
open.disabled = true;
e.stopPropagation();
});
document.body.addEventListener("click", function(e) {
if (!closest(e.target, container)) {
container.style.display = "none";
open.disabled = false;
}
});
#popup {
border: 1px solid #ccc;
padding: 5px;
display: none;
width: 200px;
}
<div id="container">
<button id="open">open</button>
<div id="popup">PopUp</div>
</div>
Something like this:
$("document").mouseup(function(e)
{
var subject = $("#login_dropdown");
if(e.target.id != subject.attr('id'))
{
subject.css('display', 'none');
}
});
works like this. When you click anywhere on the page, the handler fires and compares the ID of the open tab vs the id of the document (which there is none) - so it closes the tab. However, if you click the tab, the handler fires, checks the ID, sees the target is the same and fails the test (thus not closing the tab).

Make JQuery event available after a certain amount of time

I'm trying to make one of those annoying popups when leaving your browser. However, I want the event to be available after a certain amount of time. The event should be allowed to trigger after a certain amount of time. I've seen stuff such as delay and setTimeout, but I have no idea how to implement it on my code.
JavaScript:
$(document).on("mouseleave", function (event) {
if (event.pageY < 0) {
$(".leavemodal").fadeIn(600);
}
});
This is not tested but maybe you can try this.
$(document).ready(function() {
canRun = false;
waitPeriod = 1000;// waiting time
setTimeout(function() { canRun = true; }, waitPeriod);
$(document).on("mouseleave", function (event) {
if (!canRun) {
return false;
}
if (event.pageY < 0) {
$(".leavemodal").fadeIn(600);
}
});
});
If you want to use setTimeout() you can do something like this. Click event will be allowed 2 seconds after you mouseleave the element.
var click = false;
$('.el').mouseleave(function() {
if (click == false) {
setTimeout(function() {
console.log('You can click now')
click = true;
$(this).click(function() {
console.log('click')
})
}, 2000)
}
})
.el {
width: 200px;
height: 200px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="el"></div>

Do something on Scroll

What is the best way if I want to animate an element on scroll?
because I noticed that it lags a little bit while scrolling.
should I add the class like this?
$(window).scroll(function() {
if($(this).scrollTop() > 500) {
$(".element").addClass("animateElement");
}
}
or make a flag like this one.
animateFlag = true;
$(window).scroll(function() {
if($(this).scrollTop() > 500) {
if(animateFlag) {
$(".element").addClass("animateElement");
animateFlag = false;
}
}
}
The best way to animate something on scroll is to make the most optimized code. For example, you could use Vanilla JS with a flag like you described and also query for the element before scrolling which would result in something like so:
var animateFlag = true
var element = document.querySelector(".element")
window.addEventListener("scroll", function() {
if(this.pageYOffset > 0) {
if(animateFlag) {
element.classList.add("animateElement");
animateFlag = false;
}
}
})
.element {
background: yellow;
width: 200px;
height: 200px;
margin-bottom: 1000px;
}
.element.animateElement {
background: red;
}
<div class="element"></div>

Categories