Advanced Search

Results 1 to 10 of 10

Thread: CountUp script

  1. #1
    Join Date
    Jun 2011
    Posts
    38
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Smile CountUp script

    Hi
    I have a little difficult with converting days to years and months. In the folowing script I would like to calculate exact years and months, but I can't
    Sort of
    HTML Code:
    dyear=Math.floor(dd/(60*60*1000*24*365)*1)
    dmonth=Math.floor(dd/(60*60*1000*24*12)/(dyear*12))
    Can you help me

    HTML Code:
    <p align="left"><script>
    
    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(1960,7,13)
    
    //STEP 2: Configure text to be attached to count up
    var displaymessage=" from bla-bla."
    
    //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='#ffffff'
    var opentags='<span style="font-size:12.0pt><font face="Verdana"><font color="#4B7EFF"><b>'
    var closetags='</b></font></font></span>'
    
    //////////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
    dd=Date.parse(todaystring)-Date.parse(paststring)
    dday=Math.floor(dd/(60*60*1000*24)*1)
    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+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds "+displaymessage+closetags)
    document.countupnsmain.document.countupnssub.document.close()
    }
    else if (document.all||document.getElementById)
    crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" mins, и "+dsec+" secs"+displaymessage+closetags
    
    setTimeout("countup()",1000)
    }
    </script></p>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,680
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    Don't. If you have a Date Object, you may get the month number like so:

    Code:
    dmonth = dObj.getMonth();
    That will get you a month number 0 (for Jan) through 11 (for Dec). For example:

    Code:
    <script type="text/javascript">
    var oldDate = new Date(1954,8,25),
    now = new Date(),
    difY = now.getFullYear() - oldDate.getFullYear(),
    difM = now.getMonth() - oldDate.getMonth();
    if(difM < 0){
    	--difY;
    	difM += 12;
    }
    alert('Years: ' + difY + ', Months: ' + difM);
    </script>
    It's more complicated for days, but something similar can be worked out. From the remaining dates (which must now be brought to the current year if they aren't already*) one can use the month and day differences to calculate the exact number of days and to adjust the month number if necessary.

    I know it's tempting to just subtract one date from the other and then use only math from there. But then you would need to do a lot of stuff to account for different length months and leap years. Not to mention leap seconds.

    Alternatively, if you so choose you can use just Hours, Minutes, and Seconds. Those have no special considerations and can be accounted for by simply subtracting and converting via division.

    *However you do it, you need to remove the largest units already calculated before calculating the nest smaller number of units.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (07-24-2011)

  4. #3
    Join Date
    Jun 2011
    Posts
    38
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Default

    Mm, thanks for the respond. Sorry for my english, but if I understand correctly I don't have Date Object. I understand the problem with diferent count of months per year and days per month, but I can repair it manipulating original date.
    Can you explain me how to convert to years, please

  5. #4
    Join Date
    Jun 2011
    Posts
    38
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Question

    PP: Maybe this is the resolution - keith-wood.name/countdown.html#since ? But I can't make the compact variant

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,680
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    Works fine here:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>jQuery Countdown - Count Up Demo</title>
    <style type="text/css">
    @import "jquery.countdown.css";
    
    #tDay { width: 330px; height: 45px; font: normal 90% verdana, arial, helvetica, sans-serif; }
    #tDay .countdown_amount {font-size: 140%; width: 100%; text-align: center; display: block; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.countdown.js"></script>
    <script type="text/javascript">
    $(function () {
    	var oldDay = new Date(1954, 8, 15);
    	$('#tDay').countdown({since: oldDay, format: 'YOWDHMS', compact: true, description: 'Since ' + oldDay.toLocaleDateString()});
    });
    </script>
    </head>
    <body>
    <h1>jQuery Countdown - Count Up Demo</h1>
    <div id="tDay"></div>
    </body>
    </html>
    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (07-24-2011)

  8. #6
    Join Date
    Jun 2011
    Posts
    38
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Default

    This is the page of my site - souhssz.webnode.com/tjestova/brojach/

    I want to use bulgarian view for compact variant.
    In your code I wrote full path of jquery.countdown.js address, but I miss something - it wasn't work...

    Thanks!

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,680
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    You still need the main countdown script. I see it's on Keith's server. So you can just add (highlighted):

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown-bg.js"></script>
    
    <script type="text/javascript">
    $(function () {
    	var oldDay = new Date(1954, 8, 15);
    	$('#tDay').countdown({since: oldDay, format: 'YOWDHMS', compact: true, description: 'Since ' + oldDay.toLocaleDateString()});
    });
    </script>
    But you should host your own copies of the script. Download the archive:

    jquery.countdown.package-1.5.9.zip

    from http://keith-wood.name/countdown.html#since and use its files on your server.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (07-24-2011)

  11. #8
    Join Date
    Jun 2011
    Posts
    38
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Default

    Thanks!
    I use my host and change jquery.countdown-bg.js for bulgarian language. How to make text in one row, and is there a way to show the clock separate with "hours", "minutes" and "seconds" (not ":")?

  12. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,680
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    For the first question, get rid of this from the on page style section:

    Code:
    #tDay .countdown_amount {text-align: left; display: block; }
    About the second question, use the layout property:

    http://keith-wood.name/countdownRef.html#layout

    Here's an example:

    Code:
    <script type="text/javascript">
    $(function () {
    	var oldDay = new Date(1954, 8, 15);
    	$('#tDay').countdown({since: oldDay, format: 'YOWDHMS', layout:'{yn} years, {on} months, '+ 
        '{wnn} weeks, {dnn} days, {hnn} hours, {mnn} minutes, {snn} seconds - {desc}', compact: true, description: 'Since ' + oldDay.toLocaleDateString()});
    });
    </script>
    Of course you would want to use the Bulgarian words for years, months, etc. Like change years in the above to години, months to месеца and so on.

    Or, this seems to work out well and has the added advantage of getting the singular and plural forms of the labels right:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>jQuery Countdown - Count Up Demo</title>
    <style type="text/css">
     #tDay {font: normal 90% verdana, arial, helvetica, sans-serif;}
     #tDay #lctime {text-transform: lowercase;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.countdown.js"></script>
    <script type="text/javascript" src="jquery.countdown-bg.js"></script>
    <script type="text/javascript">
    $(function () {
    	var oldDay = new Date(1954, 8, 15);
    	$('#tDay').countdown({since: oldDay, format: 'YOWDHMS', layout:'<span id="lctime">{yn} {yl}, {on} {ol}, '+ 
        '{wnn} {wl}, {dnn} {dl}, {hnn} {hl}, {mnn} {ml}, {snn} {sl} -</span> {desc}', description: 'Since ' + oldDay.toLocaleDateString()});
    });
    </script>
    </head>
    <body>
    <h1>jQuery Countdown - Count Up Demo</h1>
    <div id="tDay"></div>
    </body>
    </html>
    Note: No longer needs or uses compact: true, in fact, that would break it.
    Last edited by jscheuer1; 06-26-2011 at 03:06 PM. Reason: add alternative
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  13. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (07-24-2011)

  14. #10
    Join Date
    Jun 2011
    Posts
    38
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Default

    Thank's a lot John! It's perfect

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •