Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First you need to put this html in the same location as the other counter:</p> <pre><code>&lt;div id="countdown2"&gt; &lt;div class="event-title"&gt; &lt;/div&gt; &lt;div id="countbox2"&gt;&lt;/div&gt; &lt;div class="event-title"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>add this to styles.css:</p> <pre><code>#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; } </code></pre> <p>On the raffle.htm you need to add in your second date in the javascript section like so:</p> <pre><code>//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; //----------------------------------------------- </code></pre> <p>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)</p> <pre><code>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 &lt; 0){ out= "&lt;div id='days'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;0&lt;/p&gt;&lt;div id='days_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='hours'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;0&lt;/p&gt;&lt;div id='hours_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='mins'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;0&lt;/p&gt;&lt;div id='mins_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='secs'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;0&lt;/p&gt;&lt;div id='secs_text'&gt;&lt;/div&gt;&lt;/div&gt;" ; 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= "&lt;div id='days'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;" + days +"&lt;/p&gt;&lt;div id='days_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='hours'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;" + hours +"&lt;/p&gt;&lt;div id='hours_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='mins'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;" + mins +"&lt;/p&gt;&lt;div id='mins_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='secs'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;" + secs +"&lt;/p&gt;&lt;div id='secs_text'&gt;&lt;/div&gt;&lt;/div&gt;" ; 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 &lt; 0){ out= "&lt;div id='days2'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;0&lt;/p&gt;&lt;div id='days_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='hours2'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;0&lt;/p&gt;&lt;div id='hours_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='mins2'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;0&lt;/p&gt;&lt;div id='mins_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='secs2'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;0&lt;/p&gt;&lt;div id='secs_text'&gt;&lt;/div&gt;&lt;/div&gt;" ; 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= "&lt;div id='days2'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;" + days +"&lt;/p&gt;&lt;div id='days_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='hours2'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;" + hours +"&lt;/p&gt;&lt;div id='hours_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='mins2'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;" + mins +"&lt;/p&gt;&lt;div id='mins_text'&gt;&lt;/div&gt;&lt;/div&gt;" + "&lt;div id='secs2'&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;" + secs +"&lt;/p&gt;&lt;div id='secs_text'&gt;&lt;/div&gt;&lt;/div&gt;" ; document.getElementById('countbox2').innerHTML=out; setTimeout("GetCount2()", 1000); } } window.onload=function(){GetCount(); GetCount2();} </code></pre> <p>Add this to counter.css:</p> <pre><code>#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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload