Create a Press and Hold Effect | KIRUPA

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

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

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

Does the example in the tutorial work?

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

Are you testing on IE11?

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.

Can you post a link to your version?

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!