Complete Novice using jquery, countdown widget won't work, can someone help?
I am a complete novice at this, never used jquery before, would like to create a countdown widget using divisions and spans for my website but can't seem to get the counter to appear.
The spans will appear and the page is blank. I wonder if my script is wrong or if I need to configure something I have missed?
Here is the page code in question:
____________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Your Title Here </title>
<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
<script type="text/javascript" src="js/jquery.min.js"></script>
<link href="css/counter.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="cntdwn_wrapper">
<div id="cntdwn_left">
<div id="counter">
<div id="defaultCountdown" class="hasCountdown">
<span class="countdown_row countdown_show4">
<span class="countdown_section">
<span class="countdown_amount"> </span>
</span>
<span class="countdown_section">
<span class="countdown_amount"> </span>
</span>
<span class="countdown_section">
<span class="countdown_amount"> </span>
</span>
<span class="countdown_section">
<span class="countdown_amount"> </span>
</span>
</span>
</div>
</div>
</div>
</div>
<div id="cntdwn_right">
<div id="cntdwn_date"><img src="images/events/numbersSmall.png" width="215" height="235"></div>
</div>
<script type="text/JavaScript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/JavaScript" src="js/jquery.countdown.js"></script>
<script type="text/JavaScript">
$(function () {
var counter = new Date();
counter = new Date(2011, 11-1, 20, 10, 0, 0);
$('#defaultCountdown').countdown({until: counter});
$('#removeCountdown').toggle(function() {
$(this).text('Re-attach');
$('#defaultCountdown').countdown('destroy');
},
function() {
$(this).text('Remove');
$('#defaultCountdo开发者_如何学编程wn').countdown({until: counter});
});
});
</script>
</body>
</html>
_________________________________
My CSS Stylesheet is written thus:
/* ----- 11. COUNTDOWN ---------------------------------------*/
#cntdwn_wrapper {
width: 570px;
height: 300px;
}
#cntdwn_left {
float: left;
width: 355px;
height: 300px;
}
#chm_countdown_slider {
width: 355px;
height: 235px;
}
#counter {
width: 355px;
height: 65px;
background: #333;
background: url();
}
#cntdwn_right {
float: left;
width: 215px;
height: 300px;
}
#cntdwn_date {
width: 215px;
height: 235px;
}
#chm_countdown_button {
width: 215px;
height: 65px;
}
a.chm_countdown_button_rollover {
display: block;
width: 215px;
height: 65px;
text-decoration: none;
background: url();
}
a.chm_countdown_button_rollover:hover {
background-position: 0 -65px;
}
.chm_countdown_button_displace {
position: absolute;
left: -5000px;
}
#defaultCountdown {
float: right;
width: 240px;
height: 43px;
margin: 9px 4px 0 0;
}
.hasCountdown {
background-color: #333;
}
.countdown_rtl {
direction: rtl;
}
.countdown_holding span {
background-color: #333;
}
.countdown_row {
clear: both;
width: 100%;
padding: 0px 2px;
text-align: center;
}
.countdown_show1 .countdown_section {
width: 98%;
}
.countdown_show2 .countdown_section {
width: 48%;
}
.countdown_show3 .countdown_section {
width: 32.5%;
}
.countdown_show4 .countdown_section {
width: 24.5%;
}
.countdown_show5 .countdown_section {
width: 19.5%;
}
.countdown_show6 .countdown_section {
width: 16.25%;
}
.countdown_show7 .countdown_section {
width: 14%;
}
.countdown_section {
display: block;
float: left;
height: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 75%;
color: #ccc;
text-align: center;
background-color: #ffffff;
}
.countdown_amount {
font-weight: bold;
font-size: 190%;
}
.countdown_descr {
display: block;
width: 100%;
}
.nivoSlider {
position: relative;
}
.nivoSlider img {
position: absolute;
top: 0;
left: 0;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 60;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
/* The slices in the Slider */
.nivo-slice {
display: block;
position: absolute;
z-index: 50;
height: 100%;
}
/* Caption styles */
.nivo-caption {
position: absolute;
z-index: 89;
bottom: 0;
left: 0;
opacity: 0.8; /* Overridden by captionOpacity setting */
width: 100%;
background: #000;
color: #fdfdfd;
}
.nivo-caption p {
margin: 0;
padding: 5px;
}
.nivo-caption a {
display: inline !important;
}
.nivo-html-caption {
display: none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position: absolute;
top: 45%;
z-index: 99;
cursor: pointer;
}
.nivo-prevNav {
left: 0;
}
.nivo-nextNav {
right: 0;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position: relative;
z-index: 99;
cursor: pointer;
}
.nivo-controlNav a.active {
font-weight: bold;
}
/* -- */
.nivo-controlNav {
position: absolute;
right: 15px;
bottom: 15px;
}
.nivo-controlNav a {
display: block;
float: left;
/*width: 8px;*/
/*height: 8px;*/
margin-left: 4px;
border: 0;
background: #fdfdfd url(bullets.png) no-repeat;
text-indent: -9999px;
}
.nivo-controlNav a.active {
background-position: 0 -8px;
}
.nivo-directionNav a {
display: block;
/*width: 30px;*/
/*height: 34px;*/
border: 0;
background: url(arrows.png) no-repeat;
text-indent: -9999px;
}
a.nivo-nextNav {
right: 15px;
background-position: -30px 0;
}
a.nivo-prevNav {
left: 15px;
}
.nivo-caption {
font-family: Helvetica, Arial, sans-serif;
text-shadow: none;
}
.nivo-caption a {
color: #efe9d1;
text-decoration: underline;
}
It just won't display the counter when I launch it and I am slightly baffled as when I compare to some other source code it should work based on their pages... am I missing something?
All help GREATLY appreciated.
Thanks
OK, I have made a fiddle with the plugin and the associated css file.
http://jsfiddle.net/rlemon/kU55B/
you can look here, there is also a small description on how to install it on your page. I am including a reference to the plugin authors jquery.countdown.js and jquery.countdown.css files, and the google hosted jquery api 1.6.2
also remember to change
var toDate = new Date(2011, 11-1, 20, 10, 0, 0);
$('#defaultCountdown').countdown({
until: toDate
});
to
$(document).ready(function(){
var toDate = new Date(2011, 11-1, 20, 10, 0, 0);
$('#defaultCountdown').countdown({
until: toDate
});
});
when you are placing it in your page.
after re-evaluating you original post i think it is important to note that you should contain (if possible) all of your script tags in the head of the document. It is not wrong to place them other places, however it is messy and undesired. Also there may be conflicts with when the code is executed.
the line $(document).ready... is the line that will ensure all of the HTML elements (or DOM elements) on the page have actually loaded and are ready to use.
加载中,请稍侯......
精彩评论