I am developing an under construction web page. I would like to use a countdown timer on the page. I have found TimeCircles which seems as though it should be very simple to use and display.
I must be doing something wrong but I do not know where I'm going wrong.
Here is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://ift.tt/mOIMeg">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<title>Coming Soon | theystolemybaby.uk.undo.it</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="theystolemybaby.uk.undo.it, Coming Soon Responsive website, Andriod Compatible website design, Smartphone Compatible website, Social services scandal, UK, Child Trafficking, Baby snatching, stealing, punishment,without crime, forced adoption" /><!--css-->
<link rel="stylesheet" href="web/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="web/TimeCircles/inc/TimeCircles.css" type="text/css" media="all" />
<!--/css-->
<!--fonts-->
<link href='http://ift.tt/1qQRi4V' rel='stylesheet' type='text/css' /><!--fonts-->
<!--js-->
<script type="text/javascript" src="http://ift.tt/183v7Lz">
</script>
<script type="text/javascript" src="web/TimeCircles/inc/TimeCircles.js">
</script>
<script type="application/x-javascript">
<![CDATA[addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
]]>
</script>
<script type="text/javascript" src="web/js/index.js"></script>
<!--js-->
<style type="text/css">
/*<![CDATA[*/div.c1 {width: 100%;}
/*]]>*/
</style>
</head>
<body>
<div class="container1"><!-- start wrap -->
<!-- start content -->
<div class="content-header">
<h1>Have UK Social Services stolen your child?</h1>
<p>Our website is under construction but we are in the final stages of development.</p>
<p>Our aim is provide a place to share the damage UK Social Services are causing thousands of families each year, a place to connect with others, to motivate, to inform, a network of thousands of bereaved parents, children, supporters, carers, whistleblowers. We need you all to be a part of what is to come!!</p>
</div>
<div id="DateCountdown" data-timer="900"></div>
</div>
<div class="clear"></div>
<!-- start notify-->
<div class="notify" class="main clearfix column">
<form>
<input type="text" class="textbox" value="Email:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"/>
<input class="md-trigger md-setperspective" data-modal="top-scorll" type="button" value="Subscribe"/>
</form>
</div>
<!--End notify-->
<!--start social icons-->
<div class="social-icons">
<h3>Catch on</h3>
<ul>
<li><a href="#"><img src="web/images/facebook.png" title="facebook" alt="" /></a></li>
<li><a href="#"><img src="web/images/twitter.png" title="Twiiter" alt="" /></a></li>
<li><a href="#"><img src="web/images/rss.png" title="Rss" alt="" /></a> </li>
<li><a href="#"><img src="web/images/gpluse.png" title="Google+" alt="" /></a></li>
</ul>
</div>
<!-- End social icons-->
<!-- start copy right -->
<div class="copy-right">
<p>Design by <a href="#">Jamie Lindsey</a></p>
</div>
<!-- End copy right -->
<!-- End Content -->
<!--End wrap -->
</body>
</html>
And here is the javascript:
$(".DateCountdown").TimeCircles({
"animation": "smooth",
"bg_width": 0.3,
"fg_width": 0.04666666666666667,
"circle_bg_color": "#4dacff",
"time": {
"Days": {
"text": "Days",
"color": "#ffef80",
"show": true
},
"Hours": {
"text": "Hours",
"color": "#99CCFF",
"show": true
},
"Minutes": {
"text": "Minutes",
"color": "#BBFFBB",
"show": true
},
"Seconds": {
"text": "Seconds",
"color": "#FF9999",
"show": true
}
}
});
All the source files are linked correctly, but it just does not show on the page. w3validator tells me:
Line 47, Column 36: there is no attribute "data-timer"
But I am not familiar with javascript so I do not know where to start.
The site can be visited here
Aucun commentaire:
Enregistrer un commentaire