I Want to Delay the Time Before a Click() Function

JavaScript
1

Hello all,

In order to delay a click() function, I tried the delay() and setTimeout() methods to delay the time until a user can “click to exit” at which time I will remove HTML content out of the way from the form page.

Here is what I tried:


$("#blackoverlay, #successfulsubmit").delay(1400).click(function(e){
				$("#blackoverlay, #successfulsubmit").remove();
			})
$("#blackoverlay, #successfulsubmit").setTimeout(function(){$(this).click(function(e){$(this).remove()})}, 1400);

Neither do what I want it to- delay a short time then allow the user to click anywhere to exit.

To success,
Tyler

2

Hi Tyler,

Unfortunately, this is not how setTimeout() works.
It is used to delay the execution of a block of code by x milliseconds.

What you could do however, is disable the element programatically, then use setTimeout() to re-enable it after x number of seconds has passed.
Here’s an example using a button:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Enable button after three seconds</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <button id="exit">Click me to exit</button>
    <script>
      $(document).ready(function() {
        $("#exit").prop("disabled", true);
        setTimeout(function(){$("#exit").prop("disabled", false)}, 3000);
      });
    </script>
  </body>
</html>

I’ve used jQuery, as I know that you are.
Also, please note that it is a good idea to use JavaScript to disable the button, so that people with JavaScript turned off don’t get stuck in a dead end.

3

Well, okay, I tried that and another method, both are not working for whatever reason. :rolleyes:

Disabling and enabling the elements using setTimeout():


$("#blackoverlay, #successfulsubmit").prop("disabled", true);
			setTimeout(function(){$("#blackoverlay, #successfulsubmit").prop("disabled", false)}, 1400);

But that has no effect on what’s written a few lines below it:


			$("#blackoverlay, #successfulsubmit").click(function(e){
				$("#blackoverlay, #successfulsubmit").remove();
			});

This is the other method that I tried:
I went ahead and put in the overlay on top of the other black overlay inside the markup at line 350:


      <div id="clearoverlay">&nbsp;</div>
      <div id="blackoverlay">&nbsp;</div>

Then here are the styles:


#clearoverlay{
    background-color:transparent;
    bottom:0;
    left:0;
    position:fixed;
    right:0;
    top:0;
	width:100%;
	height:100%;
	display:none;
	z-index:3;
}
#blackoverlay{
    display:none;
    position:fixed;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
	min-width:1171px;
	min-height:1010px;
    background-color:black;
    z-index:1;
    -moz-opacity: 0.8;
    opacity:.80;
	filter:alpha(opacity=80);
}
#successfulsubmit{
	background:url("successfulsubmit.gif");
	width:450px;
	height:100px;
	position:absolute;
	display:none;
	bottom:340px;
	left:30.5%;
	z-index:2;
}

Then, the jQuery:


$("#clearoverlay").css("display", "block").click(function(e){
				e.stopPropagation();
				e.preventDefault();
				e.stopImmediatePropagation();
			}).delay(1400).remove();
$("#blackoverlay, #successfulsubmit").click(function(e){
				$("#blackoverlay, #successfulsubmit").remove();
			});

The clicks go right through #clearoverlay, and the #blackoverlay and #successfulsubmit divs are removed.

The objective here is to display the message long enough for the user to read it (without mistakenly clicking out too quickly), and then allow the user to click to exit when done.

If you’d like to see the live code on the website, click here. Spotlight on the testSecondResults() method beginning on line 484.

-Tyler

4

Unfortunately, this can’t work because a <div> element doesn’t have a disabled property.

There is probably an easier way to achieve this than what we’re trying here.
Could you post a link to an example page, as you forgot the link in your last post.

5

It’s at the ever-familiar World Review Group page.

6

Hi,

So, just to make sure I have understood your problem correctly, let me summarize:

I go to your site and enter an email address in your “Join our Mailing List” text field
I then see a modal dialogue box asking me to confirm my mail and to enter the rest of my details.
I fill everything out correctly and press “Sign me up!”.
I then see a “Submission successful” modal dialogue, telling me that I have been signed up to the mailing list.
If I do nothing the modal dialogue vanishes after a few seconds.
However, if I click anywhere else on the screen, this also closes the modal dialogue.

You want to prevent this and stop the user being able to close the modal dialogue by clicking on the screen.
You want the modal dialogue to vanish of its own accord after the correct period has elapsed and not before.

Is this correct?

7

Yes, it already vanishes on its own after 3000 milliseconds; however, I want to allow the user to click out after 1400 milliseconds.

8

Hi there,

I had a look at the code and the following lines in the function testSecondResults() are causing you the bother.

$("#blackoverlay, #successfulsubmit").click(function(e){
  $("#blackoverlay, #successfulsubmit").remove();
});

This is where you need to use the setTimeout function, like so:

setTimeout(function(){
  $("#blackoverlay, #successfulsubmit").click(function(e){
    $("#blackoverlay, #successfulsubmit").remove();
  });
}, 2000);

Hope that helps.

9

Yes, Dave, this resolved the issue. Too bad I didn’t find the answer on my own…

Thank you. :wink:

10

No problem :slight_smile:
setTimeout can be a real pain to get your head around.
Do you understand why this worked, or would you like me to go into it a little more.