Duplicate Javascript countdown

Question

I have a javascript countdown in this page: http://omeumundoptc.comuf.com/countdown/ in the top center left. I want to duplicate it and place it in the right side. Note that both countdowns should have different times, so it should have different variables or something. What would be the steps to do to achieve this? Thanks for the help in advance.

Answer 1

First you need to put this html in the same location as the other counter:

<div id="countdown2">
   <div class="event-title">
   </div>
   <div id="countbox2"></div>
   <div class="event-title"></div>
</div>

add this to styles.css:

#countdown2 {
    position: absolute;
    left: 688px;
    top: 290px;
    width: 244px;
    height: 86px;
    line-height: 150%;
    color: #e0d1aa;
}

#countdown2 .event-title {
    position: absolute;
    left: 6px;
    top: 75px;
    width: 227px;
    text-align: center;
    font-family: 'Fjalla One', sans-serif;
    font-size: 13px;
    line-height: 125%;
    text-transform: uppercase;
    color: #000;
}

#countdown2 .days,
#countdown2 .hours, 
#countdown2 .minutes, 
#countdown2 .seconds,
#countdown2 .hundredths {
    position: absolute;
    top: 9px;
    width: 40px;
    font-size: 23px;
    font-family: 'Monda', sans-serif;
    text-align: center;
}

#countdown2 .days {
    left: 14px;
}

#countdown2 .hours {
    left: 71px;
}

#countdown2 .minutes {
    left: 126px;
}

#countdown2 .seconds {
    left: 181px;
}

#countdown2 .hundredths {
    font-size: 12px;
    text-align: left;
    top: 5px;
    left: 218px;
}

On the raffle.htm you need to add in your second date in the javascript section like so:

//Edit data below to your personal preferences ----------------------------------

//Give the date ---------------------------------
year = 2013; year2 = 2013;
month = 9; month2 = 10;
day = 30; day2 = 30;
//Give the point of time ------------------------
hour= 24; hour2 = 24;
min= 0; min2 = 0;
sec= 0; sec = 0;
//-----------------------------------------------

You need to modify your counter.js also with this: (this is far from optimized. there are much better methods of doing this via jquery)

month= --month;
dateFuture = new Date(year,month,day,hour,min,sec);
dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2);

function GetCount(){

        dateNow = new Date();                                                            
        amount = dateFuture.getTime() - dateNow.getTime()+5;               
        delete dateNow;

        /* time is already past */
        if(amount < 0){
                out=
                "<div id='days'><span></span><p>0</p><div id='days_text'></div></div>" + 
                "<div id='hours'><span></span><p>0</p><div id='hours_text'></div></div>" + 
                "<div id='mins'><span></span><p>0</p><div id='mins_text'></div></div>" + 
                "<div id='secs'><span></span><p>0</p><div id='secs_text'></div></div>" ;
                document.getElementById('countbox').innerHTML=out;       
        }
        /* date is still good */
        else{
                days=0;hours=0;mins=0;secs=0;out="";

                amount = Math.floor(amount/1000); /* kill the milliseconds */

                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=
                "<div id='days'><span></span><p>" + days +"</p><div id='days_text'></div></div>" + 
                "<div id='hours'><span></span><p>" + hours +"</p><div id='hours_text'></div></div>" + 
                "<div id='mins'><span></span><p>" + mins +"</p><div id='mins_text'></div></div>" + 
                "<div id='secs'><span></span><p>" + secs +"</p><div id='secs_text'></div></div>" ;
                document.getElementById('countbox').innerHTML=out;


                setTimeout("GetCount()", 1000);
        }
}

function GetCount2(){

        dateNow = new Date();                                                            
        amount = dateFuture2.getTime() - dateNow.getTime()+5;               
        delete dateNow;

        /* time is already past */
        if(amount < 0){
                out=
                "<div id='days2'><span></span><p>0</p><div id='days_text'></div></div>" + 
                "<div id='hours2'><span></span><p>0</p><div id='hours_text'></div></div>" + 
                "<div id='mins2'><span></span><p>0</p><div id='mins_text'></div></div>" + 
                "<div id='secs2'><span></span><p>0</p><div id='secs_text'></div></div>" ;
                document.getElementById('countbox').innerHTML=out;       
        }
        /* date is still good */
        else{
                days=0;hours=0;mins=0;secs=0;out="";

                amount = Math.floor(amount/1000); /* kill the milliseconds */

                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=
                "<div id='days2'><span></span><p>" + days +"</p><div id='days_text'></div></div>" + 
                "<div id='hours2'><span></span><p>" + hours +"</p><div id='hours_text'></div></div>" + 
                "<div id='mins2'><span></span><p>" + mins +"</p><div id='mins_text'></div></div>" + 
                "<div id='secs2'><span></span><p>" + secs +"</p><div id='secs_text'></div></div>" ;
                document.getElementById('countbox2').innerHTML=out;


                setTimeout("GetCount2()", 1000);
        }
}

window.onload=function(){GetCount(); GetCount2();}

Add this to counter.css:

#countbox2 {
    color: #FFFFFF;
    font-family: Myriad Pro,Helvetica,sans-serif;
    font-size: 32px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
}
#days2 {
    background-image: url("../images/countdown/flip.png");
    background-repeat: no-repeat;
    float: left;
    height: 42px;
    margin: 0 7px;
    text-align: center;
    width: 44px;
    z-index: 1;
}
#days_text2 {
    background-image: url("../images/countdown/days_text.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    height: 26px;
    margin-top: 10px;
    position: absolute;
    width: 44px;
}
#hours2 {
    background-image: url("../images/countdown/flip.png");
    background-repeat: no-repeat;
    float: left;
    height: 42px;
    margin: 0 7px;
    text-align: center;
    width: 44px;
    z-index: 1;
}
#hours_text2 {
    background-image: url("../images/countdown/hours_text.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    height: 26px;
    margin-top: 10px;
    position: absolute;
    width: 44px;
}
#mins2 {
    background-image: url("../images/countdown/flip.png");
    background-repeat: no-repeat;
    float: left;
    height: 42px;
    margin: 0 7px;
    text-align: center;
    width: 44px;
    z-index: 1;
}
#mins_text {
    background-image: url("../images/countdown/mins_text.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    height: 26px;
    margin-left: -5px;
    margin-top: 10px;
    position: absolute;
    width: 54px;
}
#secs2 {
    background-image: url("../images/countdown/flip.png");
    background-repeat: no-repeat;
    float: left;
    height: 42px;
    margin: 0 7px;
    text-align: center;
    width: 44px;
    z-index: 1;
}
#secs_text {
    background-image: url("../images/countdown/secs_text.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    height: 26px;
    margin-top: 10px;
    position: absolute;
    width: 54px;
}
#days2 p, #hours2 p, #mins2 p, #secs2 p {
    margin-top: 8px;
}