Search code examples
javascriptwidthcountdown

Need help aligning result of a Javascript's Countdown


I'm working on this countdown: http://apps.facebook.com/tjdcountdown/

I would like to add a specific width for each result (minutes,hours,days) of my countdown so the number are always perfectly align with the text below.

Is it possible to create a variable for each result and recall them later in my html code?

Here is the script for the countdown:

<script type="text/javascript">

var myMonth = "<?= $myMonth ?>";
var myDay = "<?= $myDay ?>";
var myYear = "<?= $myYear ?>";
var myHour = "<?= $myHour ?>";
var myMin = "<?= $myMin ?>";

dateFuture1 = new Date(2013,03,26,14,15,00);

function GetCount(ddate,iid){

    dateNow = new Date();   //grab current date
    amount = ddate.getTime() - dateNow.getTime();   //calc milliseconds between dates
    delete dateNow;

    // if time is already past
    if(amount < 0){
        document.getElementById(iid).innerHTML="I'm now married!";
    }
    // else date is still good
    else{
        years=0;weeks=0;days=0;hours=0;mins=0;secs=0;out="";

        amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

        years=Math.floor(amount/31536000);//years (no leapyear support)
        amount=amount%31536000;

        weeks=Math.floor(amount/604800);//weeks
        amount=amount%604800;

        days=Math.floor(amount/86400);//days
        amount=amount%86400;

        hours=Math.floor(amount/3600);//hours
        amount=amount%3600;

        mins=Math.floor(amount/60);//minutes
        amount=amount%60;

        secs=Math.floor(amount);//seconds

        out += years +""+((years==1)?"":"")+"";
        out += weeks +""+((weeks==1)?"":"")+"";
        if(days != 0){out += days +""+((days==1)?"":"")+"";}
        if(hours != 0){out += hours +""+((hours==1)?"":"")+"";}
        out += mins +""+((mins==1)?"":"")+"";
        out += secs +""+((secs==1)?"":"")+", ";
        out = out.substr(0,out.length-2);
        document.getElementById(iid).innerHTML=out;
        setTimeout(function(){GetCount(ddate,iid)}, 1000);
    }
}

window.onload=function(){
    GetCount(dateFuture1, 'countbox1');
    //you can add additional countdowns here (just make sure you create dateFuture2 and countbox2 etc for each)
};
</script>

Thank a lot for helping!


Solution

  • Yes, you can do all that. Place each number inside its own div and and center the text inside each div. No coding should be required for making sure text is centered.

    The main problem now is that all numbers (years, weeks, days, hours, etc) are squeezed into one div (iid aka 'countbox1') when they need to be separated out into their own divs.