CODEWITHSUNDEEP
htmljqueryjquery-mobiletouch
shiri
shiri

Reputation: 115

Click and hold onto a selected div to hide?

I have the following code that will hide an element when it is clicked:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

<script> 
$(document).on("pagecreate","#pageone",function(){   

$("p").on("taphold",function(){
        $(this).hide();   
});                        

}); 

</script> 
</head>

The taphold Event

If you tap and hold me for one second, I will disappear.

Tap and hold me!

Tap and hold me too!

Footer Text

What I would like to do is change the <p> to <div> elements and click on different divs to hide them:

<div id='d1'>If you tap and hold me for one second, I will disappear.</div>
<div id='p4'>Tap and hold me!</div>
<div id='g7'>Tap and hold me too!</div>

Upvotes: 0

Views: 1440

Answers (2)

Ali Rasheed
Ali Rasheed

Reputation: 2817

I don't actually understand. Do you want to click on div instead of p

Then just change the p in jquery to div

<div id='d1' class="clickme">If you tap and hold me for one second, I will disappear.</div>
<div id='p4' class="clickme">Tap and hold me!</div>
<div id='g7' class="clickme">Tap and hold me too!</div>
<script> 
$(document).on("pagecreate","#pageone",function(){   

$(".clickme").on("taphold",function(){

  var id  = $(this).attr('id');
  $("#"+id).hide();   
});                        

}); 

</script>

Upvotes: 1

shiri
shiri

Reputation: 115

Thanks to some tips from Ali Rasheed,

the changes in code are as followed:

<div id='d1'>If you tap and hold me for one second, I will disappear.</div>
<div id='p4'>Tap and hold me!</div>
<div id='g7'>Tap and hold me too!</div>

$(document).on("pagecreate","#pageone",function(){   

$("p").on("taphold",function(){
        $(this).hide();   
});

to:

<div id='d1' class="clickme">If you tap and hold me for one second, I will disappear.</div>
<div id='p4' class="clickme">Tap and hold me!</div>
<div id='g7' class="clickme">Tap and hold me too!</div>

$(document).on("pagecreate","#pageone",function(){   

$(".clickme").on("taphold",function(){

  var id  = $(this).attr('id');
  $("#"+id).hide();   
});

Most importantly, this will NOT work without the following added to your code:

<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script src="jquery.mobile-1.4.5.min.js"></script>

You need jquery.mobile otherwise tap-hold will not work at all.

Hope that helps!

Upvotes: 1

Related Questions