Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript Create Count Down Download Page With JavaScript

Create Count Down Download Page With JavaScript

You maybe see a download page with counter/timer within a range that displays the seconds remaining (count down) before prompting a downloadable file via it’s URL. For example: our download page or SourceForge download page.

This article will give you an idea in order to create a download page with a counter/timer. Meaning user have to wait for few seconds (8 seconds, for example) before downloading the desired file.

JavaScript – Create Count Down Download Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Count Down Download Page With JavaScript</title>
<script type="text/javascript"> 
	//Count to 8 seconds 
	var c = 8; 
	window.onload = function(){ 
		countDown(); //Execute the method 
	}    
	function countDown()
	{ 
		c -= 1; 
		if(c>=0)
		{
			document.getElementById("timer").innerHTML = " in " + c + " seconds";
		}
		else
		{ 
			document.getElementById("timer").innerHTML = "Now"; 
			download(); 
			return; 
		}
		var counter2 = setTimeout("countDown()",1000); 
		return; 
	} 
	function download(){ 
		var ele = document.createElement('iframe'); 
		ele.src = "http://4rapiddev.com/wp-content/plugins/download-monitor/download.php?id=php-manage-session.zip"; 
		ele.style.display = "none"; 
		document.body.appendChild(ele);
	} 
</script> 
</head>
 
<body>
<div style="margin-left:20px;">
<h2>Thanks for trying our page!</h2><br />
<h3>An downloadable will be started <span id="timer"></span>.</h3> 
</div>
<div style="margin-left:20px; margin-top:20px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at egestas turpis. Proin tincidunt, velit nec scelerisque tincidunt, est erat aliquet leo, vitae faucibus urna sem nec enim. Proin quis commodo nunc. Curabitur condimentum, lacus nec aliquam imperdiet, dui est vestibulum justo, quis pellentesque arcu leo vitae leo. Sed vel volutpat mauris. Proin sodales, enim vitae mollis sagittis, ipsum leo tempor leo, et commodo dolor orci sit amet est. Cras vulputate, mi quis interdum placerat, lectus orci egestas odio, eget tincidunt turpis nisi congue risus. Quisque molestie accumsan aliquam. Aliquam non magna tellus, eu accumsan justo. Vestibulum bibendum tincidunt enim, vitae euismod est adipiscing a. Praesent placerat tincidunt placerat.</p>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Count Down Download Page With JavaScript</title> <script type="text/javascript"> //Count to 8 seconds var c = 8; window.onload = function(){ countDown(); //Execute the method } function countDown() { c -= 1; if(c>=0) { document.getElementById("timer").innerHTML = " in " + c + " seconds"; } else { document.getElementById("timer").innerHTML = "Now"; download(); return; } var counter2 = setTimeout("countDown()",1000); return; } function download(){ var ele = document.createElement('iframe'); ele.src = "http://4rapiddev.com/wp-content/plugins/download-monitor/download.php?id=php-manage-session.zip"; ele.style.display = "none"; document.body.appendChild(ele); } </script> </head> <body> <div style="margin-left:20px;"> <h2>Thanks for trying our page!</h2><br /> <h3>An downloadable will be started <span id="timer"></span>.</h3> </div> <div style="margin-left:20px; margin-top:20px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at egestas turpis. Proin tincidunt, velit nec scelerisque tincidunt, est erat aliquet leo, vitae faucibus urna sem nec enim. Proin quis commodo nunc. Curabitur condimentum, lacus nec aliquam imperdiet, dui est vestibulum justo, quis pellentesque arcu leo vitae leo. Sed vel volutpat mauris. Proin sodales, enim vitae mollis sagittis, ipsum leo tempor leo, et commodo dolor orci sit amet est. Cras vulputate, mi quis interdum placerat, lectus orci egestas odio, eget tincidunt turpis nisi congue risus. Quisque molestie accumsan aliquam. Aliquam non magna tellus, eu accumsan justo. Vestibulum bibendum tincidunt enim, vitae euismod est adipiscing a. Praesent placerat tincidunt placerat.</p> </div> </body> </html>

View demo & [download id=”15″ format=”1″]

Feb 29, 2012Hoan Huynh
PHP Store Session In MySQL Database MS SQL How to get all database names
You Might Also Like:
  • Auto Rotate Web Page Title With JavaScript
  • Get Image Width Height With JQuery And JavaScript
  • Create Pie Chart With HTML & JavaScript
  • JQuery Create Textbox With Count Down Limit Characters
  • JavaScript Detect Protocol (HTTP/ HTTPS) To Load Or Handle Accordingly
  • Javascript Problem Set focus textbox on Firefox
  • JavaScript Display Leaving Confirm Box Leave This Page Or Stay On This Page
  • Create Stacked Column Chart With HTML & JavaScript
  • How To Track Website With Multiple Google Analytisc Accounts
  • Javascript generate a random number using Math.random
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

10 years ago JavascriptappendChild, createElement, getElementById, onload, setTimeout223
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,442 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,823 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,631 views
JQuery Allow only numeric characters or only alphabet characters in textbox
14,978 views
C# Read Json From URL And Parse/Deserialize Json
11,691 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development