FORUMS: list search recent posts

Countdown up timer html code

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Lucy Hird Countdown up timer html code
by on Nov 24, 2009 at 4:27:48 pm

Hello. I'm having a problem trying to add a count-up timer on my son's webpage. What I'm trying to accomplish is:

My name is Duncan, and I'm *years*, *months* old.

I'd found this script, although because he was born in 2009, the scripts returns 'infinity months' on the webpage. Also, I can't seem to remove the hours, minutes and second, to just leave the years and months without the whole thing collapsing. I'm just a newbie and I've already a headache. I wondered if anyone had any ideas?

<script language="JavaScript1.2">

//Dynamic countup Script- © Dynamic Drive (http://www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

function setcountup(theyear,themonth,theday){
yr=theyear;mo=themonth;da=theday
}

//////////CONFIGURE THE countup SCRIPT HERE//////////////////

//STEP 1: Configure the date to count up from, in the format year, month, day:
//This date should be less than today
setcountup(2008,3,14)

//STEP 2: Configure text to be attached to count up
var displaymessage="old"

//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countup area
var countupwidth='95%'
var countupheight='20px' //applicable only in NS4
var countupbgcolor='lightyellow'
var opentags='<font face="Verdana"><small>'
var closetags='</small></font>'

//////////DO NOT EDIT PASS THIS LINE//////////////////

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countup(){
if (document.layers)
document.countupnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countupie") : countupie
countup()
}

if (document.all||document.getElementById)
document.write('<span id="countupie" style="width:'+countupwidth+'; background-color:'+countupbgcolor+'"></span>')

window.onload=start_countup


function countup(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
paststring=montharray[mo-1]+" "+da+", "+yr+" 10:00"
dd=Date.parse(todaystring)-Date.parse(paststring)
dyear=Math.floor(dd/(60*60*1000*24*365)*1)
dmonth=Math.floor(dd/(60*60*1000*24*12)/(dyear*12))
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)

if (document.layers){
document.countupnsmain.document.countupnssub.document.write(opentags+dyear+" years, "+dmonth+" months, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds "+displaymessage+closetags)
document.countupnsmain.document.countupnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dyear+" years, "+dmonth+" months, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds "+displaymessage+closetags

setTimeout("countup()",1000)
}
</script>


Return to posts index


cowcowcowcowcow
Curtis ThompsonRe: Countdown up timer html code
by on Nov 24, 2009 at 5:05:48 pm

hello...

i did a script like this for my niece - here's a stripped out version of mine with a test function:

http://sitruc.com/cow/age/

note that the test doesn't validate input, as the script would have a realistic date hard-coded into the variables...

hope that helps!

sitruc


Return to posts index

Lucy HirdRe: Countdown up timer html code
by on Nov 24, 2009 at 8:39:25 pm

Thanks Curtis... I am still stumbling a little bit, but getting nearer!

http://www.dunkydoughnut.co.uk/home.html

I can't seem to get it to work within the table I've created. The text is there but the months and days are not. Perhaps I have an error somewhere in he code? Will keep pressing on.


Return to posts index


cowcowcowcowcow
Curtis ThompsonRe: Countdown up timer html code
by on Nov 24, 2009 at 8:51:44 pm

hello....

well - works here in safari, but i see that you pasted all the content of my example in there, which includes the head, body, etc. tags - you don't need those here, and that's probably why it's not working for other browsers...

all you need to do is:

1. take the top script block (shown below) and put that in between the head tags in your page

<script type="text/javascript">
<!--

// set the birthdate here
var BIRTH_MONTH = 7;
var BIRTH_DAY = 15;
var BIRTH_YEAR = 2009;

// format the month strings to your liking
var MONTHS = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

//
// don't change anything beneath this in the javascript block
//
function timeSince (m, d, y, dynArea) {

var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var now = new Date();
var then = new Date(y, (m - 1), d);
var dayCount = 0;
var monthCount = 0;
var yearCount = 0;
var age = "";

// is it a leap year? if so, update month count
monthDays[1] = (new Date(now.getYear(), 2-1, 29).getDate() == 29) ? 29 : 28;

// get the days
dayCount = Math.ceil((now.getTime() - then.getTime()) / (24*60*60*1000));

// get out the years
while ((dayCount - 365) > 0) {
yearCount++;
dayCount -= 365;
}

// now get out the months
for (var i=0; i < monthDays.length; i++) {
if ((dayCount - monthDays[i]) > 0) {
dayCount -= monthDays[i];
monthCount++;
} else {
break;
}
}

// format the string
age += (yearCount > 0) ? (yearCount + " year" + ((yearCount == 1) ? "" : "s")) : "";
age += ((yearCount > 0) && (monthCount > 0)) ? ", " : "";
age += (monthCount > 0) ? (monthCount + " month" + ((monthCount == 1) ? "" : "s")) : "";
age += (age != "") ? " and " : "";
age += (dayCount + ((dayCount == 1) ? " day" : " days"));

document.getElementById(dynArea).innerHTML = age;

}

//-->
</script>

2. take the "ageNow" span and put that where you want your age string to show (this part you have pretty much there)

3. take the " onload" part from my body tag and put it in your body tag:

<body onload="timeSince(BIRTH_MONTH, BIRTH_DAY, BIRTH_YEAR, 'ageNow')">

the rest of my example you can disregard...

sitruc




Return to posts index

Lucy HirdRe: Countdown up timer html code
by on Nov 24, 2009 at 9:51:44 pm

Thank you for your help, but I fear I've made it worse now.

http://www.dunkydoughnut.co.uk/home4.html

I'm bundling through dreamweaver with no knowledge of web basics, using the templates have just confused me further. I'm sure I've still got stuff in the wrong place and I don't understand it because I've a countdown to christmas timer on the index page which works fine. Gonna go and sleep on it I think.


Return to posts index

Curtis ThompsonRe: Countdown up timer html code
by on Nov 24, 2009 at 11:45:18 pm

hello....

you have it minus one change - instead of this:

<body bgcolor="3399FE" onLoad="MM_preloadImages('../elements/home%20rollover.gif','../images/home2.gif','../images/milestones2.gif','../images/family2.gif','../images/photos2.gif','../images/videos2.gif','../images/contact%20me2.gif'), "timeSince(BIRTH_MONTH, BIRTH_DAY, BIRTH_YEAR, 'ageNow')">

your body tag should be this:

<body bgcolor="3399FE" onLoad="MM_preloadImages('../elements/home%20rollover.gif','../images/home2.gif','../images/milestones2.gif','../images/family2.gif','../images/photos2.gif','../images/videos2.gif','../images/contact%20me2.gif'),timeSince(BIRTH_MONTH, BIRTH_DAY, BIRTH_YEAR, 'ageNow')">

you just had an extra quote there after the last mouseover image argument and your function...

sitruc


Return to posts index


Lucy HirdRe: Countdown up timer html code
by on Nov 25, 2009 at 3:44:12 pm

It's working brilliantly now. Thank you very much for all your trouble. You're a 24 carat diamond! What a headache, time to open the wine.


Return to posts index

Curtis ThompsonRe: Countdown up timer html code
by on Nov 25, 2009 at 3:51:07 pm

hello...

cool! glad it's working. i have to ask - i picked this date randomly in the sample i made:

var BIRTH_MONTH = 7;
var BIRTH_DAY = 15;
var BIRTH_YEAR = 2009;

and you still have it there now - is that really his birthday? did i get that lucky in guessing? :-)

sitruc





Return to posts index

Lucy HirdRe: Countdown up timer html code
by on Nov 25, 2009 at 5:10:04 pm

I'm afraid you're not that lucky, he's 8 months old. I'd uploaded several 'home' pages each with slight code variations sort of stabbing wildly in the dark for one that would work. I kept imputing the dates then pasting over it so many times I decided to not bother until I had something that worked, and do it last.

The script is now fully operational at..

http://www.dunkydoughnut.co.uk/home.html

I think the problem was that I was trying to put the whole code in the table where I wanted it displayed because most of the body was locked in the page template I'd made, and I didn't want to start changing that when it took me hours to make it to a servicable standard!

REALLY thank you SO much


Return to posts index


Mike SmithRe: Countdown up timer html code
by on Nov 24, 2009 at 5:08:54 pm

You could try just deleting the unwanted hours, etc from the two display options - like


<script language="JavaScript1.2">
<br>
<br>//Dynamic countup Script- © Dynamic Drive (http://www.dynamicdrive.com)
<br>//For full source code, 100's more DHTML scripts, and TOS,
<br>//visit http://www.dynamicdrive.com
<br>
<br>function setcountup(theyear,themonth,theday){
<br>yr=theyear;mo=themonth;da=theday
<br>}
<br>
<br>//////////CONFIGURE THE countup SCRIPT HERE//////////////////
<br>

<br>//STEP 1: Configure the date to count up from, in the format year, month, day:
<br>//This date should be less than today
<br>setcountup(2008,3,14)
<br>
<br>//STEP 2: Configure text to be attached to count up
<br>var displaymessage="old"
<br>
<br>//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countup area
<br>var countupwidth='95%'
<br>var countupheight='20px' //applicable only in NS4
<br>var countupbgcolor='lightyellow'
<br>var opentags='<font face="Verdana"><small>'
<br>var closetags='</small></font>'

<br>
<br>//////////DO NOT EDIT PASS THIS LINE//////////////////
<br>
<br>var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
<br>var crosscount=''
<br>
<br>function start_countup(){
<br>if (document.layers)
<br>document.countupnsmain.visibility="show"
<br>else if (document.all||document.getElementById)
<br>crosscount=document.getElementById&&!document.all?document.getElementById("countupie") : countupie
<br>countup()
<br>}
<br>
<br>if (document.all||document.getElementById)
<br>document.write('<span id="countupie" style="width:'+countupwidth+'; background-color:'+countupbgcolor+'"></span>')

<br>
<br>window.onload=start_countup
<br>
<br>
<br>function countup(){
<br>var today=new Date()
<br>var todayy=today.getYear()
<br>if (todayy < 1000)
<br>todayy+=1900
<br>var todaym=today.getMonth()
<br>var todayd=today.getDate()
<br>var todayh=today.getHours()
<br>var todaymin=today.getMinutes()
<br>var todaysec=today.getSeconds()
<br>var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec

<br>paststring=montharray[mo-1]+" "+da+", "+yr+" 10:00"
<br>dd=Date.parse(todaystring)-Date.parse(paststring)
<br>dyear=Math.floor(dd/(60*60*1000*24*365)*1)
<br>dmonth=Math.floor(dd/(60*60*1000*24*12)/(dyear*12))
<br>dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
<br>dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
<br>dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
<br>
<br>if (document.layers){
<br>document.countupnsmain.document.countupnssub.document.write(opentags+dyear+" years, "+dmonth+" months, "+dhour+" +displaymessage+closetags)
<br>document.countupnsmain.document.countupnssub.document.close()
<br>}
<br>else if (document.all||document.getElementById)
<br>crosscount.innerHTML=opentags+dyear+" years, "+dmonth+" months, "+displaymessage+closetags
<br>
<br>setTimeout("countup()",1000)
<br>}

<br></script>


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]