Question

I have a website that will load as as follows:

<div class"overlay">
<div id="hideMsg">15 </div>
<div class="mainbox">
</div>
</div>

At the moment the overlay disappears after 15 seconds, but i would like to stop this happening if somebody clicks inside the div mainbox. (e.g the box div will no longer disappear. At the same time, I would also like the countdown timer to disappear as it will no longer be needed.

The code I am using is:

to make the div disappear

$(document).ready(function()  {
    setTimeout(function() {
        $(".overlay").fadeOut(1500);
    },15000);
        });

for the countdown timer

var sec = 15
var timer = setInterval(function() {
   $('#hideMsg span').text(sec--);
   if (sec == -1) {
  $('#hideMsg').fadeOut('fast');
  clearInterval(timer);
   } 
}, 1000);

I think i need to stop the function somehow, but not sure how to do this. Really interested to see what the best way to do this is.

Thanks,

Scott

Answer 1

Try clearing the timeout onclick of mainbox.

$(document).ready(function()  {
    var mTimer = setTimeout(function() {
        $(".overlay").fadeOut(1500);
    },15000);

    $('.mainbox').click (function () {
       clearTimeout(mTimer);
       $('#hideMsg').fadeOut(100);
    });
});