CODEWITHSUNDEEP
javascriptjquery
Mathieu
Mathieu

Reputation: 4787

Reveal div if no click on a certain other div for more than x seconds

I currently have in javascript a code that currently does well what I want :

But I don't manage to do this: once a user has clicked on a target (that's already operational), but then I want the alert message to reappear after, every time the user has not clicked on .target div for more than 5 seconds.

I'm rephrasing it to be more clear: I want the message to first appear after 7 seconds, then each time the user click on.target, the message should disappear. BUT if he does not click for more than 5 seconds on .target, the message should REappear

How to do this ?

html

<section id="alert-msg" style="visibility: hidden"> 
  <div>my message</div>
</section>

Javascript

//1. message only appear after 7 sec
function showIt2() {
    document.getElementById("alert-msg").style.visibility = "visible";
  }
  setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked
  $('.target').on('click touchstart', function(){
    $("#alert-msg").remove();
  });

Here is a jsfiddle: https://jsfiddle.net/111994re/3/

Upvotes: 2

Views: 145

Answers (4)

Alain Nisam
Alain Nisam

Reputation: 680

Ok, now, alert appears after x seconds. Then, if the user clicks target, the timer resets and alert appears again after x seconds indefinitely.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<section id="alert-msg"> 
    <div style="display:none;">Alert!</div>
</section>

<div class="target">Target</div>

<script type="text/javascript">
//1. message only appear after 7 sec
function showIt2() {
    if( $('#alert-msg') ){
        $('#alert-msg div').fadeOut();
        $('#alert-msg div').fadeIn();
    }
  }
  var show = setInterval(showIt2, 5000); 

// 2. alert message disappear when .target div is clicked
  $('.target').on('click touchstart', function(){
    $("#alert-msg div").hide();
    clearInterval(show);
    show = setInterval(showIt2, 5000); 
  });
</script>

Upvotes: 1

jnoreiga
jnoreiga

Reputation: 2175

https://jsfiddle.net/111994re/10/

   //1. message only appear after 7 sec
function showIt2() {
    $("#alert-msg").show();
  }
  setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked
  $('.target').on('mousedown touchstart', function(){
  $("#alert-msg").hide(); 
    clearTimeout(this.downTimer);

  }).on("mouseup touchstop", function(e) {
    this.downTimer = setTimeout(function() {

          showIt2();
    }, 5000);
});

Upvotes: 1

Seth McClaine
Seth McClaine

Reputation: 10040

Check out this revision: https://jsfiddle.net/111994re/7/

I've added setTimeout inside of your onclick I've set visibility to hidden instead of removing it (removing it you can't unhide it at that point, you would have to re-add)

//1. message only appear after 7 sec
function showIt2() {
    document.getElementById("alert-msg").style.visibility = "visible";
  }
  setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked
  $('.target').on('click touchstart', function(){
    document.getElementById("alert-msg").style.visibility = "hidden";
    setTimeout(showIt2, 5000);
  });

Upvotes: 2

Omari Victor Omosa
Omari Victor Omosa

Reputation: 2879

There where some typing error

//1. message only appear after 7 sec
function showIt2() {
    document.getElementById("alert-msg").style.visibility = "visible";
  }
  setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked
  $('.target').on('click touchstart', function(){
    $("#alert-msg").remove();
});
<section id="alert-msg" style="visibility: hidden"> 
  <div>my message</div>
</section>

Upvotes: 1

Related Questions