Create a Press and Hold Effect

programming
1

by kirupa | 24 May 2018

Have questions? Discuss this HTML5 / JavaScript tutorial with others on the forums.

This is a companion discussion topic for the original entry at https://www.kirupa.com/html5/press_and_hold.htm
1 Like
2

As I pointed out in a comment to the related article (CSS + JS = Win!), the example here does not work in IE 11 because that browser does not support CSS custom variables; however it does work in all my other browsers (Microsoft Edge, Chrome, Firefox, and Opera)

1 Like
3

It does not working properly on Iphone and galaxy s mobile browser. What should i do now?

4

Does the example in the tutorial work?

5

Above example doesnt enlarge or reduce circle size on clicking as it was shown in example image

6

Are you testing on IE11?

7

I have tested on chrome and Firefox. I have copied entire last code on one html file and tried to execute . The circle inside blue background doesn’t enlarge on clicking… no response.

8

Can you post a link to your version?

9

Wanted to start out by thanking you for this code! I made a small JS game using canvas and this was essential. I noticed a small bug where if you right click it would register the mousedown, but fail to register the mouseup, leaving the ball inflating by itself indefinitely. I fixed this by adding a conditional “e.button === 0” to prevent right clicks. There were also some issues related to not having the first 50ms threshold like you have here. Basically if you rapidly clicked it would also inflate indefinitely like in the previous bug, presumably because rapidly clicking registers a mousedown without a mouseup at some point. I might have fixed it by adding some more conditionals? It’s hard to replicate the bug lol. Link to the project is here if you’re curious https://collich55.github.io/Blow_Up_Just_Right/ .
Thanks again!

10

The actual working code, the one of the working example is the following one (it’s a copy/paste of the html source). Please note that it is different from the one dear Kirupa wrote under the heading “Deconstructing our Press and Hold Example”.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Press and Hold</title>
<style>
#container {
  width: 100%;
  height: 350px;
  background-color: #0099FF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 7px;
}
#item {
  --scale-value: 1;
  width: 100px;
  height: 100px;
  background-color: #FFF;
  border: 10px solid #0066CC;
  border-radius: 50%;
  transform: scale3d(var(--scale-value), var(--scale-value), 1);
  transition: transform cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
}
#item:active {
  border-color: #003A75;
  background-color: #F2F5EA;
}
#item:hover {
  cursor: pointer;
}
</style>
</head>
<body>
<div id="outerContainer">
<div id="container">
<div id="item">
</div>
</div>
</div>
<script>
let dragItem = document.querySelector("#item");
let container = document.querySelector("#container");
let timePressed = 0;
let press = false;
dragItem.addEventListener("mousedown", pressingDown, false);
dragItem.addEventListener("mouseup", notPressingDown, false);
dragItem.addEventListener("touchstart", pressingDown, false);
dragItem.addEventListener("touchend", notPressingDown, false);

function counter() {
  if (press) {
    timePressed++;
    scaleItem();
  } else {
    timePressed = 0;
    resetItem();
  }

  requestAnimationFrame(counter);
}
counter();

function pressingDown(e) {
  press = true;
  e.preventDefault();
}
function notPressingDown(e) {
  press = false;
}
function scaleItem() {
  let size = 1 + timePressed / 50;
  if (size > 2) {
    size = 2;
    container.classList.add("stripes");
  }
  dragItem.style.transitionDuration = "0s";
  dragItem.style.setProperty("--scale-value", size);
}
function resetItem() {
  dragItem.style.transitionDuration = ".2s";
  dragItem.style.setProperty("--scale-value", 1);
  container.classList.remove("stripes");
}

</script>
</body>
</html>
11

Excellent article my head exploded because I did not know requestAnimationFrame.

Note: for those who work, remove line 113 and 114 from the final code

1 Like
12

Why would lines 113 and 114 need to be removed? It is these lines:

    let scale = 1 + counter / 50;
    item.style.transform = "scale3d(" + scale + ", " + scale + ", 1)";
13

Hello

First because it doesn’t make much sense to declare in javascript what you already initialized with css.

And if you check several they report that it does not work for them and to test why it did not work for them and put those last two lines and effectively it stopped working.