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 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Exclamation Countdown to page refresh

    Hi Guys,

    Our company own a lot of domains and want to put a short page of copy on each address along with keywords before redirecting the user to our main site.

    I have been able to get the page to load the main site after the desired time using this code in the head...

    <META HTTP-EQUIV="refresh" CONTENT="40;URL=http://webaddress.com/">
    That works perfectly, I am now trying to display a countdown timer from 40 seconds down to 0, and on 0 redirect the user. Saying something like "You will be redirected in XX seconds".

    Is there anyway of doing this? I've been searching google for the answers with no luck and can only seem to find timers that countdown to a set date.

    Thanks in advance!
    Ria

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Put this code into the <body>
    Code:
    <div id="countdown"></div>
    <script type="text/javascript">
    var duration = 40;
    showDuration();
    
    function showDuration() {
       document.getElementById('countdown').innerHTML = "You will be redirected in " + duration + " seconds";
       duration--;
       window.setTimeout(showDuration, 1000);
    }
    
    </script>

  • Users who have thanked devnull69 for this post:

    designedbyria (08-22-2011)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Code:
    <div id="countdown"></div>
    
    <script type="text/javascript">
    
    var duration = 40;
    showDuration();
    
    function showDuration() {
    document.getElementById('countdown').innerHTML = "You will be redirected in " + duration + " seconds";
    duration--;
    if (duration >=0) {
    window.setTimeout(showDuration, 1000);
    }
    else {
    window.location.href = "http://www.google.com";
    }
    }
    
    </script>

    Quizmaster: What is the name of the river that runs through Rome?
    Contestant: The Nile.
    Last edited by Philip M; 08-22-2011 at 12:48 PM.

    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.

  • Users who have thanked Philip M for this post:

    designedbyria (08-22-2011)

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    @Philip_M He already has the page refresh in his META tag ... but nevertheless, your code will work fine, too

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by devnull69 View Post
    @Philip_M He already has the page refresh in his META tag ... but nevertheless, your code will work fine, too
    Oh, sorry, I did not notice the META tag. And I left the <div> out.

    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.

  • #6
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Philip M View Post
    Oh, sorry, I did not notice the META tag. And I left the <div> out.
    In case you don't know what the meta tag does, this explanation might help.

  • #7
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Excellent! Thanks guys! DevNull69 your code works perfectly and does just what I need it to do! Many thanks, Philip M - I'm not quite sure how yours is different? Thanks all the same

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Philip's code added the refresh part to Javascript, so you could as well use his code and remove the META tag

  • #9
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts
    ok here's another stupid question...

    How do I style up the text? I can't use <p> tags can I?

    Thanks!

    Also it would be able to put a link in there too... "if you are not redirected click here"

    Many thanks

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    You can use any string that produces valid HTML ...

  • #11
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I knew it was a stupid question! Thanks for your help

  • #12
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts
    oh wait sorry! Just tryed to include a link with no luck... I think it dislikes the <a> tags and "

    if you are not redirected <a href="http://site.com">please click here </a>

  • #13
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Because
    Code:
    "<a href="linkpage.html">"
    is not a valid string, whereas
    Code:
    "<a href=\"linkpage.html\">"
    or
    Code:
    '<a href="linkpage.html">'
    is

  • Users who have thanked devnull69 for this post:

    designedbyria (08-22-2011)

  • #14
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts
    SUCCESS! Thanks mate!


  •  

    Tags for this Thread

    Posting Permissions

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