Advanced Search

Results 1 to 3 of 3

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

  1. #1
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default jquery countdown won't work within <div>

    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;
    }
    Last edited by crs95; 07-16-2012 at 08:33 PM. Reason: Resolved

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    crs95 (07-16-2012)

  4. #3
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •