z4ndrea / jquery-countdown

Automatically exported from code.google.com/p/jquery-countdown
0 stars 0 forks source link

Making countdown a smaller size #11

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
Is there a way to make the countdown smaller?  I've tried adjusting digitWidth 
and digitHeight and even actually modifying the size of digits.png to match... 
but did not help.  I love this countdown but it's currently too big of a size 
for my implementation, any suggestions?  Thanks.

Original issue reported on code.google.com by chrischr...@me.com on 16 Apr 2011 at 1:19

GoogleCodeExporter commented 8 years ago
I agree. I would also like to adjust the color. A PSD would be nice...

Original comment by n...@movementstrategy.com on 17 Sep 2011 at 5:49

GoogleCodeExporter commented 8 years ago
Example how to change size:
The PNG consists of 60 frames, so if you want your Height to be 18px you 
multiply 18 by 60 = 1080px. Then you divide 4619 (the original Height of the 
PNG) into 1080 = 4,276851851851852. Then you divide 53 (the original Width of 
the PNG) into 4,276851851851852 = 12,39229270404849 and you round it up or down 
(12 or 13).

So if you want to achieve the following size:
digitWidth: 13,
digitHeight: 18
You will have to resize your image to 13x1080px.

Original comment by Ashmode...@gmail.com on 11 Oct 2011 at 7:34

GoogleCodeExporter commented 8 years ago
Ashmode... thank you so much. You are a life saver!

Original comment by dipo...@gmail.com on 19 Feb 2012 at 11:04

GoogleCodeExporter commented 8 years ago
Cool; but when I do that; my clock suddenly only counts 30 seconds per minute?

Original comment by james.ca...@gmail.com on 6 Aug 2012 at 12:32

GoogleCodeExporter commented 8 years ago
I have added here 2 different versions of the 'digits.png' one I coined 'MEDIUM 
SIZE' with a 40px height and one I coined 'SMALL SIZE' with the example from 
above (18px height). I am currently using the 'MEDIUM SIZE' one. Here is the 
adjusted code:
  //jQuery Counter Script
  $(document).ready(function() {
    $('#counter').countdown({
        stepTime: 60,
        format: 'hh:mm:ss',
        startTime: "12:32:55",
        digitImages: 6,
        /*
        --MEDIUM SIZE--
        */
        digitWidth: 28,
        digitHeight: 40,
        /*
        --SMALLEST SIZE--
        digitWidth: 13,
        digitHeight: 18,
        */
        /*
        --FULL SIZE--
        digitWidth: 53,
        digitHeight: 77,
        */
        timerEnd: function() { alert('end!!'); },
        image: "images/digits40.png"
      });
    });

Original comment by jrod...@gmail.com on 6 Mar 2013 at 7:36

Attachments:

GoogleCodeExporter commented 8 years ago
There is no need to change the images, please check latest issue fix, i posted 
a small solution for that

 "background-size": options.digitWidth+'px 100%',

Cheer :-)

Original comment by qaseria...@gmail.com on 2 Aug 2013 at 5:07