Resizing the countdown?

[daveydave]

I have this working well right now on a bootstrap-based site. The digits are a little big for what I want though and was wondering if there was an easy way to scale this? At first glance it didn't look possible since the sprite was a fixed size, but I'm probably overlooking something obvious.

Thanks!

[ghost]

This is what I did. First add an extra pixel to the width in the psd (left or right). The width should now be 68px. Now you can divide evenly by 2 (45px & 34px). Pass the width and height options such as:

$('.digits').countdown({ image: "img/digits.png", digitWidth: 34, digitHeight: 45 });

and in CSS you need to make sure to set the background to 100%.

.cntDigit { background-size:100% !important; }

Hope this is useful for someone in the future.

[ManmeetGWB]

This is superb! I think others could benefit from this. I was just getting fed up with this issue for last two days. Thanks a lot !

[MonteShaffer]

This seems to work easier ... Got the idea from here:

https://stackoverflow.com/questions/17333254/scale-the-contents-of-a-div-by-a-percentage

<script>
      $(function(){
        $("#clock-2").countdown({
          image: "img/digits.png",
          format: "mm:ss",
          endTime: new Date(2013, 12, 2)
        });
      });
    </script>

<div id="clock-2" style="zoom: 0.5; -moz-transform: scale(0.5);"></div>