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:

Code:

<!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:

Code:

/* 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:

Code:

<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:

Code:

<!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.

Thread: jquery countdown won't work within <div>

Thread Tools

Search Thread

jquery countdown won't work within <div>

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions