Resolved jquery countdown won't work within <div> [Archive]

View Full Version : Resolved jquery countdown won't work within <div>

crs95

07-16-2012, 07:29 PM

I'm using the basic jquery countdown from Keith Wood. I did some small format changes and it seems to work fine.

I want to put that countdown inside another picture. I've got the image set up as the background of <div class>. However, once I place the countdown <div id> inside of the <div class>, the countdown disappears - only the background image shows.

Any help would be appreciated.

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<style type="text/css">
@import "jquery.countdown.css";

#defaultCountdown { width: 250px; height: 45px;}

</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var nextgame = new Date();
nextgame = new Date(nextgame.getFullYear() + 0, 9 - 1, 1, 18, 0);
$('#defaultCountdown').countdown({until: nextgame});
$('#year').text(nextgame.getFullYear());

});

</script>
</head>
<body>

<div id="defaultCountdown"></div>
<br>
<div class="box_countdown">
<div id="defaultCountdown""></div>
</div>

</body>

css:

/* jQuery Countdown styles 1.5.11. */
.hasCountdown {
border: 0px solid #ccc;
background-color: #eee;
}
.countdown_rtl {
direction: rtl;
}
.countdown_holding span {
background-color: #ccc;
}
.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;
font-size: 75%;
text-align: center;
}
.countdown_amount {
font-size: 200%;
}
.countdown_descr {
display: block;
width: 100%;
}
.box_countdown {
width: 620px;
height: 49px;
background-image:url('../images/nextgame.png');
padding-left: 10px;
padding-top:33px
}
.countdown_space {
width: 250px;
height: 45px;
}

jscheuer1

07-16-2012, 08:21 PM

I think your problem is - there can only be one element per page with a given id.

You can either remove the highlighted:

<body>

<div id="defaultCountdown"></div>
<br>
<div class="box_countdown">
<div id="defaultCountdown""></div>
</div>

</body>

Or if you want two of the same countdown on the page, use class:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<style type="text/css">
@import "jquery.countdown.css";

.defaultCountdown { width: 250px; height: 45px;}

</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var nextgame = new Date();
nextgame = new Date(nextgame.getFullYear() + 0, 9 - 1, 1, 18, 0);
$('.defaultCountdown').countdown({until: nextgame});
$('#year').text(nextgame.getFullYear());

});

</script>
</head>
<body>

<div class="defaultCountdown"></div>
<br>
<div class="box_countdown">
<div class="defaultCountdown""></div>
</div>

</body>

crs95

07-16-2012, 08:25 PM

Thank you so much. That fixed the problem. I was only leaving the first <div id> in order to make sure the coundown itself was still working. Didn't realize that caused the conflict.