Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: delay on link?

  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    delay on link?

    How would I set a delay on a link? Say I click on a link <a href="test.html">link</a> , and I want test.html to load 3 seconds after I click that link?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    <a href="#" onclick="setTimeout(window.document.location='test.html',3000);">link</a>

    But what is the point? The user will wonder why the link has not worked.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Ummm...nope, not quite, Philip.

    That window.document.location='test.html' will execute when the setTimeout is called, not 3 seconds later.

    If you don't simply pass a function reference to setTimeout, you must pass literal code wrapped in quotes.

    Easy fix:
    Code:
    <a href="#" onclick="setTimeout('window.document.location=\'test.html\';',3000);return false;">link</a>
    Or you could do (a bit cleaner)
    Code:
    <a href="#" 
       onclick="setTimeout(function(){window.document.location='test.html';},3000);return false;"
    >link</a>
    In either case, you want the return false there to prevent the browser from jumping to the top of the pages, as it would do because of the href="#".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Philip, the reason I want to do this is to allow a short animation to play before the page loads. Old Pedant, thank you, this does work, just one small thing. Is there a way to have the link in the status bar to match the url that the link is going to? Currently when I mouse over the link, the status bar displays the current page's url with a # on the end of it. Instead I want the status bar to show the url that the link will actually take you to ( http://resin.webs.com/test.html ). How would I do this?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Code:
    <a href="test.html" 
       onclick="setTimeout(function(){window.document.location='test.html';},3000);return false;"
    >link</a>
    The URL that is in the href won't be used, anyway, so you can make it whatever you want. Just have it match your actual target page, for example.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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