6

I want to make a page with Click and Hold event effect, like http://andeinerseite.video/ or http://2016.makemepulse.com/, I'm interested in what framework uses to create those effects.

Zev Spitz
  • 13,950
  • 6
  • 64
  • 136
Isabel Cariod
  • 353
  • 3
  • 6
  • 20
  • 3
    Not sure if it's an actual framework or something they did themselves, but I'm guessing that the underlying thing is just start doing stuff at the `mousedown` event and then stop it at `mouseup`. – VLAZ Nov 13 '16 at 12:48
  • a good question with 7 upvoting on an accepted answer but has only 1 upvote on the question? What happens? – nima Oct 15 '20 at 14:58
  • 1
    @novonimo This isn't a very good question, it just happened to become a canonical result due to traffic from search engines (22k views at time of writing) and the luck of someone writing a good answer and providing working code that solves a common problem. Currently, there are 5 upvotes on the question and 3 downvotes. – ggorlen Jul 24 '21 at 19:16
  • thanks a lot for your useful information about this topic @ggorlen – nima Jul 25 '21 at 12:55

2 Answers2

10

You can use Javascript's setTimeout function and bind it to mousedown events. Have a look at the snippet below:

// click and hold event listener

var timeout_id = 0,
    hold_time = 1000,
    hold_menu = $('.hold_menu'),
    hold_trigger = $('.hold_trigger');

hold_menu.hide();

hold_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle, hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

function menu_toggle() {
  hold_menu.toggle();
}
ul.hold_menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.hold_menu a, div.hold_trigger  {
   display: inline-block;
   padding: 5px 15px;
   border: 1px solid #ccc;
   width: 300px;
}

ul.hold_menu a:link, ul.hold_menu a:visited {
   color: black;
   text-decoration: none;
}

ul.hold_menu a:active, ul.hold_menu a:hover {
   background: #ff0;
   text-decoration: none;
}

div.hold_trigger {
   color: black;
   cursor: pointer;
}

div.hold_trigger:hover {
   background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hold_trigger">Click and hold to toggle the menu</div>
<ul class="hold_menu">
   <li><a href="#">Option 1</a></li>
   <li><a href="#">Option 2</a></li>
   <li><a href="#">Option 3</a></li>
</ul>

Hope this helps!

Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
9

With plain javascript you can do something like this:

selector.addEventListener('mousedown', function(event) { 
  // simulating hold event
  setTimeout(function() {
    // You are now in a hold state, you can do whatever you like!
  }, 500);
});

You can tweak the 500ms value to any timespan fits your needs.

Inzamam Tahir
  • 519
  • 4
  • 17
Dimitris Tornazakis
  • 107
  • 1
  • 3
  • 2
    This adds a delay to respond to a mousedown, but if the mousedown is followed by a mouseup shortly thereafter (i.e. a short click), then it's not true that you're in a hold state 500 ms later. You'll need to clear the timeout if the mouseup event fires too soon as shown [here](https://stackoverflow.com/a/40573997/6243352). – ggorlen Jul 24 '21 at 19:13