# Create a Press and Hold Effect

**URL:** https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273
**Category:** programming
**Created:** [May 25, 2018, 6:06am UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273 "2018-05-25T06:06:18Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 25, 2018, 6:06am UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/1 "2018-05-25T06:06:18Z")

</div>

by [kirupa](https://www.kirupa.com/www.kirupa.com/about/whatiskirupa.htm) | 24 May 2018

[Have questions? Discuss this HTML5 / JavaScript tutorial with others on the forums.](https://www.kirupa.com/www.kirupa.com/forum/showthread.php?370334-Tutorial-Random-Numbers-in-JavaScript)

* * *
This is a companion discussion topic for the original entry at [https://www.kirupa.com/html5/press\_and\_hold.htm](https://www.kirupa.com/html5/press_and_hold.htm)

---

<div class="post-metadata">

### Author: ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)
#### Post date: [September 3, 2018, 11:31pm UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/2 "2018-09-03T23:31:45Z")

</div>

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)

---

<div class="post-metadata">

### Author: ![alvee](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/alvee/32/9332_2.png) [@alvee](https://forum.kirupa.com/u/alvee)
#### Post date: [October 25, 2018, 11:22am UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/3 "2018-10-25T11:22:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 25, 2018, 1:02pm UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/4 "2018-10-25T13:02:14Z")

</div>

Does the example in the tutorial work?

---

<div class="post-metadata">

### Author: ![Lobsang\_tibet](https://avatars.discourse-cdn.com/v4/letter/l/3da27b/32.png) [@Lobsang\_tibet](https://forum.kirupa.com/u/Lobsang_tibet)
#### Post date: [January 14, 2019, 10:17pm UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/5 "2019-01-14T22:17:58Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 14, 2019, 11:08pm UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/6 "2019-01-14T23:08:40Z")

</div>

Are you testing on IE11?

---

<div class="post-metadata">

### Author: ![Lobsang\_tibet](https://avatars.discourse-cdn.com/v4/letter/l/3da27b/32.png) [@Lobsang\_tibet](https://forum.kirupa.com/u/Lobsang_tibet)
#### Post date: [January 15, 2019, 5:54am UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/7 "2019-01-15T05:54:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 15, 2019, 6:11am UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/8 "2019-01-15T06:11:50Z")

</div>

Can you post a link to your version?

---

<div class="post-metadata">

### Author: ![collich55](https://avatars.discourse-cdn.com/v4/letter/c/a4c791/32.png) [@collich55](https://forum.kirupa.com/u/collich55)
#### Post date: [December 25, 2020, 5:47pm UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/9 "2020-12-25T17:47:08Z")

</div>

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/](https://collich55.github.io/Blow_Up_Just_Right/) .  
Thanks again!

---

<div class="post-metadata">

### Author: ![Giuseppe\_Romanazzi](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/giuseppe_romanazzi/32/13502_2.png) [@Giuseppe\_Romanazzi](https://forum.kirupa.com/u/Giuseppe_Romanazzi)
#### Post date: [February 2, 2021, 12:28pm UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/10 "2021-02-02T12:28:32Z")

</div>

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>
```

---

<div class="post-metadata">

### Author: ![Andersson\_Mesa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/andersson_mesa/32/14498_2.png) [@Andersson\_Mesa](https://forum.kirupa.com/u/Andersson_Mesa)
#### Post date: [May 13, 2021, 9:34pm UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/11 "2021-05-13T21:34:19Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 13, 2021, 9:56pm UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/12 "2021-05-13T21:56:50Z")

</div>

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

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

```

---

<div class="post-metadata">

### Author: ![Andersson\_Mesa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/andersson_mesa/32/14498_2.png) [@Andersson\_Mesa](https://forum.kirupa.com/u/Andersson_Mesa)
#### Post date: [May 13, 2021, 10:47pm UTC](https://forum.kirupa.com/t/create-a-press-and-hold-effect/638273/13 "2021-05-13T22:47:10Z")

</div>

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.