SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

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

    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:
    Code JavaScript:
    $("#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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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:

    HTML Code:
    <!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. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Tried a Couple of Ways of Doing This

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

    Disabling and enabling the elements using setTimeout():
    Code JavaScript:
    $("#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:
    Code JavaScript:
    			$("#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:
    HTML Code:
          <div id="clearoverlay">&nbsp;</div>
          <div id="blackoverlay">&nbsp;</div>
    Then here are the styles:
    Code:
    #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:
    Code JavaScript:
    $("#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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by etidd View Post
    Code JavaScript:
    $("#blackoverlay, #successfulsubmit").prop("disabled", true);
    setTimeout(function(){$("#blackoverlay, #successfulsubmit").prop("disabled", false)}, 1400);
    Unfortunately, this can't work because a <div> element doesn't have a disabled property.

    Quote Originally Posted by etidd View Post
    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.
    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. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's at the ever-familiar World Review Group page.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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?
    Yes, it already vanishes on its own after 3000 milliseconds; however, I want to allow the user to click out after 1400 milliseconds.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

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

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


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

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

    Hope that helps.

  9. #9
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, Dave, this resolved the issue. Too bad I didn't find the answer on my own...

    Thank you.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No problem
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •