0

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>
Maqk
  • 515
  • 9
  • 26

0 Answers0