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