Display a Counter before Redirecting Users

A lot of sites display a counter before redirecting a user. Let us see how to create this counter using JavaScript. The solution has been tested in IE7 and Firefox.


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Redirect Users</title>

    <script type="text/javascript" language="javascript">

        window.onload = function() 

        {

            Redirect();

        }

 

        var cnt = 10;

        function Redirect()

        {                        

            if (cnt > 0){

                document.getElementById("cntDisp").innerHTML = 

                cnt + " seconds left..";                

                cnt = cnt - 1;

                setTimeout("Redirect()", 1000);

            }

            else {

                document.getElementById("cntDisp").innerHTML =

                "redirecting...";

                window.open("http://www.dotnetcurry.com/", "_self");

            }

        }        

    </script>

</head>

    <body>

        <div id="cntDisp"/>    

    </body>

</html>



The code displays a counter for 10 seconds and then redirects the user to the desired url. The same code cab be used on an ASP.NET Page.

2 comments:

  1. mobile99November 12, 2010 at 2:32 AM

    Nice one !

    ReplyDelete
  2. AnonymousJuly 29, 2011 at 5:40 AM

    Finally something understandable about redirects with timer. :) Thanks, Suprotim Agarwal!

    ReplyDelete