Countdown timer layout - Keith Wood

Question

I'm trying to use the basic .js countdown timer from Keith Wood but am running into troubles when trying to adjust the layout. Because I cannot inspect the element (every time I inspect it it reloads and vanishes so I can't work out what CSS needs to be adjusted).

I want it to output as : XX days XX hours xx minutes

I tried adding a layout code to the script but it does nothing.

<script type="text/javascript">
$(function () {
  var austDay = new Date();
  austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
  $('#defaultCountdown').countdown({until: austDay});
  $('#year').text(austDay.getFullYear());
  $('#textLayout').countdown({until: liftoffTime, 
    layout: '{sn} {sl}, {mn} {ml}, {hn} {hl}, and {dn} {dl}'});
});
</script>

This part in particular apparently should make it output as I want but it doesn't

$('#textLayout').countdown({until: liftoffTime, 
        layout: '{sn} {sl}, {mn} {ml}, {hn} {hl}, and {dn} {dl}'});
    });

Here is the live site: username is admin password is gogogo

http://www.francesca-designed.me/fyp/

Answer 1

<div id="defaultCountdown" class="hasCountdown">
<span class="countdown_row  countdown_show4">
<span class="countdown_section">
<span class="countdown_amount">366</span><br>Days</span>
<span class="countdown_section">
<span class="countdown_amount">6</span><br>Hours</span>
<span class="countdown_section">
<span class="countdown_amount">57</span><br>Minutes</span>
<span class="countdown_section">
<span class="countdown_amount">39</span><br>Seconds</span>
</span>
</div>

There you go!

All you do if you get this problem (and assuming you are using google chrome) is righ-click -> inspect

Then get the parent container and right click -> copy as HTML and then paste into an editor

EDIT

To address your code giving the wrong output (and not the CSS layout part -

 layout: '{mn} {ml}, {hn} {hl}, and {dn} {dl}'

just remove the

 {sn} {sl}

Answer 2

What you need is to define "liftoffTime".

Example of missing code:

<script>
var liftoffTime = new Date();
liftoffTime.setDate(liftoffTime.getDate() + 5); /* 5 days countdown */
</script>

*I think in Your case You need to replace "liftoffTime" by "austDay" (since You've defined austDay)