I have been trying to create a smallest jquery for displaying Countdown. I tried using other snippets like keith-wood script But problem is that it has a huge jquery. I want to create a variables in the jquery which call be pulled through data attributes and displays then elements. What am looking is to create a less weight jquery without using thirdparty scripts.
Tricky Part
I need a bit tricky system that If I remove weeks
block then I want the next block with days should automatically convert those weeks into days and add in the days block. So, the 2 days will show 366 which is (52 Weeks = 364 Days) + 2 Days. Check in the Demo for the days out put to understand.
I have added the data attributes in HTML where I want to fetch the variables from the jquery and generate the output in the HTML blocks.
.at-cd-timer{
clear:both;
position: relative;
margin:30px 0;
}
.at-cd-inner {
display: table;
width: 100%;
table-layout: fixed;
}
.at-cd-inner:hover {
text-decoration: none;
}
.at-cd-block {
display: table-cell;
}
.at-cd-block-inner {
display: block;
margin:1px 1px 0 0;
padding:20px;
background-color:#dddddd;
}
.at-cd-time {
display: block;
font-size:30px;
line-height: 1em;
color:inherit;
text-decoration: none;
}
.at-cd-timelabel {
display: block;
text-transform:uppercase;
color:inherit;
overflow: hidden;
text-overflow: ellipsis;
}
.aligncenter { text-align: center; }
<div class="at-countdown-timer aligncenter" data-maximum="5" data-interval="1000" data-minute="0" data-hour="0" data-day="14" data-month="4" data-year="2017">
<span class="at-cd-inner">
<span class="at-cd-block at-cd-weeks">
<span class="at-cd-block-inner">
<span class="at-cd-time">52</span>
<span class="at-dc-timelabel">Weeks</span>
</span>
</span>
<span class="at-cd-block at-cd-days">
<span class="at-cd-block-inner">
<span class="at-cd-time">2</span>
<span class="at-cd-timelabel">Days</span>
</span>
</span>
<span class="at-cd-block at-cd-hours">
<span class="at-cd-block-inner">
<span class="at-cd-time">10</span>
<span class="at-cd-timelabel">Hours</span>
</span>
</span>
<span class="at-cd-block at-cd-minutes">
<span class="at-cd-block-inner">
<span class="at-cd-time">49</span>
<span class="at-cd-timelabel">Minutes</span>
</span>
</span>
<span class="at-cd-block at-cd-seconds">
<span class="at-cd-block-inner">
<span class="at-cd-time">35</span>
<span class="at-cd-timelabel">Seconds</span>
</span>
</span>
</span>
</div>
If the Week block is removed then the result should automatically take
<div class="at-countdown-timer aligncenter" data-maximum="5" data-interval="1000" data-minute="0" data-hour="0" data-day="14" data-month="4" data-year="2017">
<span class="at-cd-inner">
<span class="at-cd-block at-cd-days">
<span class="at-cd-block-inner">
<span class="at-cd-time">366</span>
<span class="at-cd-timelabel">Days</span>
</span>
</span>
<span class="at-cd-block at-cd-hours">
<span class="at-cd-block-inner">
<span class="at-cd-time">10</span>
<span class="at-cd-timelabel">Hours</span>
</span>
</span>
<span class="at-cd-block at-cd-minutes">
<span class="at-cd-block-inner">
<span class="at-cd-time">49</span>
<span class="at-cd-timelabel">Minutes</span>
</span>
</span>
<span class="at-cd-block at-cd-seconds">
<span class="at-cd-block-inner">
<span class="at-cd-time">35</span>
<span class="at-cd-timelabel">Seconds</span>
</span>
</span>
</span>
</div>