How to create an Under Construction Page with jquery « Depot webdesigner – Tutorials and more resources for webdesigner

Email Subscription

How to create an Under Construction Page with jquery

August - 16 - 2010 by Arbaoui Mehdi

Author: Arbaoui Mehdi

Hi, I'm Arbaoui Mehdi. I'm the editor of Depotwebdesigner and Codamaniacs,the Site Manager of both Tutoslinux, and Rabbitemplate. I spend too much time in front of the computer.

Contact Author : support@depotwebdesigner.com

Here is a quick example to learn how to create an Under Construction page with jquery

Code Html and Javascript :

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Under Construction Page From Depot Webdesigner</title>
<link rel="stylesheet" href="css/paper.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
<script type="text/javascript">
		$(function () {
			var liftoffTime = new Date(2010, 9 - 1, 14, 13, 00);
			$('#counter').countdown({until: liftoffTime,
		    layout: '<div class="blockTime"><div class="blockLeft"><h1 class="titleH1">{dl}</h1><div class="contentBlockLeft"> <h1>{dn}</h1> </div></div> <div class="blockLeft"><h1 class="titleH1">{hl}</h1> <div class="contentBlockLeft"><h1>{hn}</h1></div></div> <div class="blockLeft"><h1 class="titleH1">{ml}</h1><div class="contentBlockLeft"> <h1>{mnn}</h1></div></div> <div class="blockLeft"><h1 class="titleH1">{sl}</h1><div class="contentBlockLeft"> <h1>{snn}</h1></div></div></div>'});
	});
		</script>
</head>
<body>
<div id="container">
  <div class="intro_text">
  <h1>Website under construction. We will be live soon! </h1></div>
  <div class="countdown">
    <h1>We expect an official launch in</h1>
    <div id="counter"></div>
  </div>
  <div class="status"> </div>
</div>
<!--end container-->
</body>
</html>

You can adjust the date from:

var liftoffTime = new Date(2010, 9 - 1, 14, 13, 00);

Code Css :

/* Resets */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, em, font, img,  small, strong, ol, ul, li,fieldset, form, label, legend {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-family:Tahoma, Geneva, sans-serif;
}

/* Main styles */

body{
	margin:0; padding:0;
	color:#4d4b4b;
	background: #ABA590;
	font-family: Georgia, sans-serif;
	font-size:14px;
	line-height:140%;
}

p{
	margin-bottom:15px;line-height:130%;
}

h1, h2{padding:5px 0 22px 0;}

h1{font-size: 28px;}

h2{font-size: 23px;}

.tag{font-family:Helvetica, Arial, san-serif;
font-size: 52px;
font-style:uppercase;
font-weight:bold;}

#container{
	width:960px;
	margin:0px auto;
	padding-top:50px;
	text-align:center;
	height:440px;
}

.intro_text{
	font-size:18px;
	margin-top:18px;
	margin-bottom:20px;
	color:black;
}

.countdown h4{
	font-weight:400;
	font-size:12px;
	color:#848282;
}

.countdown #counter{
	font-size:22px;
	color:#1e1a19;
	margin-bottom:70px;
}

.blockLeft
{
	background:url('../images/back-btn.jpg') no-repeat center;
	float:left;
	margin-left:10px;
	width:156px;
	height:133px;
}

.blockLeft h1
{
	font-size:50px;
}

.contentBlockLeft
{
	width:80px;
	margin:18px 0px 0px 35px;
	text-shadow:0 1px 0 #eaf459;
}

.blockTime
{
	margin:10px 0px 0px 120px;
}
.titleH1
{
	padding:0;
	font-size:25px !important;
	margin-top:8px;
	text-shadow:0 1px 0 #eaf459;
}

Share and Enjoy:

Tags:clean, css, designer, example, javascript, Jquery, jQuery library, Photoshop, under construction, web 2.0, webdesigner, xhtml

Discussion 5 Comments

vihar says:

August 17, 2010 at 6:23 am

thanks for sharing this under construction page.
i have tried for change the date but not get proper result.
can u tell me how to change date..
Waiting for positive reply

Reply
Arbaoui Mehdi says:

August 17, 2010 at 9:25 am
Change :
```
var liftoffTime = new Date(2010, 9 - 1, 14, 13, 00);
```
9: months
1 : weeks
13 : seconds
00 : minutes

for more information about using the plugin visit:

http://keith-wood.name/countdownRef.html
Reply
vihar Reply:
August 31st, 2010 at 6:07 am
sorry for mine side for thanking uu.. thanks once again sir

Reply
Arbaoui Mehdi says:

September 1, 2010 at 2:37 am

You’re welcome vihar

Reply
Alan says:

November 6, 2011 at 2:50 am

var liftoffTime = new Date(2010, 9 – 1, 14, 13, 00);

9: months
1 : weeks
13 : seconds
00 : minutes

But what is the 14 for? I have had a look at this and struggle with math so it seems a little complicated for me

Reply