#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    5

    Question 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:
    $("#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
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    You could temporarily insert an overlay such as a div element that would cover the page and so would stop clicks getting through to the elements underneath.

    Something like:

    jQuery:
    Code:
    function delayClicks() {
        $('body').append('<div id="overlay"></div>');
        $('#overlay').click(function (e) {
            e.stopPropagation();
            e.preventDefault();
            e.stopImmediatePropagation();
        });
        setTimeout(function () {
            $('#overlay').remove();
        }, 5000); // <-- time in milliseconds
    }
    CSS:
    Code:
    #overlay {
        background-color: transparent;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
    When you want to disable clicks you would just call delayClicks(); You can see a working example here: http://jsfiddle.net/wHdeS/2/ and a version with a coloured overlay here: http://jsfiddle.net/wHdeS/3/
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    delay is for animations; it doesn't work with setting event handlers.

    setTimeout is a global function of JavaScript , not a jQuery method.

    I recommend you add something to indicate the the buttons are (temporarily) disabled.

    Try this:
    Code:
    setTimeout(function(){
      $("#blackoverlay, #successfulsubmit").click(function(e){$(this).remove()})
    }, 1400);
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    5
    Then, if I use a JavaScript method instead of jQuery, doesn't that mean that users with JS turned off will be stuck?
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Yes, if you don't provide an alternative. jQuery is JavaScript -- it's just a library to make writing JavaScript scripts easier.

    FYI, I use Firefox's NoScript extension which blocks JavaScript (which I write scripts in on a regular basis) and Flash except for domains that I specifically allow.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    5

    Unhappy


    Hmmm... I tried something similar to what was suggested by Edge360.

    I went ahead and put in the overlay on top of the other black overlay inside the markup at line 350:
    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:
    $("#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 site in action, this is the page it is on.

    In the meantime, I'm going to try to do this another way.

    Thanks,

    Tyler
    Last edited by etidd; April 4th, 2013 at 07:55 PM.

IMN logo majestic logo threadwatch logo seochat tools logo