Question

Hoping for some help with this, as I'm not exactly a js expert.

I have a countdown set up, adapted from Keith Wood's countdown. It's not counting down in any browser, though it seems to be functioning perfectly in every other regard.

Here she is on jfiddle.

And here's the code:

html:

<div id="form">
    <div id="topbox">
        <div class="countdown"></div>
        <div id="until">
            until move-in
        </div>
    </div>
</div>

js:

$(document).ready(function() {

    //preload rollover image
    var image = $('<img />').attr('src', '../../images/countdown_button1.png');

    // jqueryUI calls for buttons
    $(".back a").button({
        icons: {primary: "ui-icon-triangle-1-w"}
    });

    // checklist button rollover
    $('#bottombox a').hover(
        function () {
            $('#bottombox').addClass("button").removeClass("nobutton");
        }, function () {
            $('#bottombox').addClass("nobutton").removeClass("button");
        }
    );

    // start instance of countdown
    $('.countdown').countdown({until: new Date(2014, 9-1, 21, 10), layout: 
        '<ul class="countdown-tabs"><li><a>{dn} <span>{dl}</span></a></li>' + 
        '<li><a>{hn} <span>{hl}</span></a></li>' + 
        '<li><a>{mn} <span>{ml}</span></a></li>' + 
        '<li class="last-child"><a>{sn} <span>{sl}</span></a></li></ul>'});

    $('.bg-switcher input').change(function () {
        // set background photo to value of photo-switcher
        window.location.hash = $(this).attr('id');
        var photo = "url('/images/countdown_" + $(this).attr('id') + ".jpg')";
        $('#canvas').css('background-image', photo);
    });

});

function setPhoto() {
    if(window.location.hash === "" || window.location.hash === "#one") {
        $('#one').attr("checked", "checked");
        $(".bg-switcher").buttonset();
    } else {
        // grab the value of the URL hash
        var urlHash = window.location.hash.substring(1);

        // set background photo to value in URL hash
        var urlPhoto = "url('/images/countdown_" + urlHash + ".jpg')";
        $('#canvas').css('background-image', urlPhoto);

        $('#' + urlHash).attr("checked", "checked");
        $(".bg-switcher").buttonset();
    }
};

I'm also calling:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.js"></script>
<script type="text/javascript" src="/js/jquery.plugin.js"></script>

Any ideas on how to get it to count down? Appreciate it!

Was it helpful?

Solution

You don't look like calling the actual countdown script as indicated on the website you took the script from:

~2. Download and include the jQuery Countdown CSS and JavaScript in the head section of your page.

<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css"> 
<script type="text/javascript" src="js/jquery.plugin.js"></script> 
<script type="text/javascript" src="js/jquery.countdown.js"></script>

EDITED: Other than that, check the developer tool of your browser for errors and try to fix them all. They might not be related directly to this, but they may prevent the execution of the rest of the script.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top