How to stop 60 second timer from being "jumpy" (css/javascript)

Question

I've created a "60 second" countdown timer in javascript and I'm trying to figure out how to make it not "Jumpy".. The main problem is that the fonts characters are not consistent widths. The only way I see going about this is somehow appending each character into it's own div and controlling the width on that div through css. But I'm not really sure how to go about that. Is there a better approach to this?

I know the Greensock's "TweenMax" plugin can handle this, but I'd like to create this myself as opposed to using a library for one small thing.

jsFiddle:** http://jsfiddle.net/oneeezy/3CreM/1/

HTML:

<div class="row">
    <span class="timer timerback">00:00</span>
    <span id="Timer" class="timer timerfront">60:00</span>
    <span class="seconds">Seconds</span>
</div>

JAVASCRIPT:

var count = 6000;
var counter = setInterval(timer, 10);

function timer()
{
    if (count <= 0)
    {
        clearInterval(counter);
        return;
     }
     count--;
     document.getElementById("Timer").innerHTML=count /100;
 }

Broncobuster

its happening bcz when millisecond goes to single digit like 6,5,4. if you push extra digit for this than u can solve this problem – Purdah

Answer 1

Choose a monospace font so that all characters are the same width. The simplest way to do this is add font-family: monospace; to your CSS for the timer element.

Take a look at http://www.google.com/fonts/ for a good selection of monospace fonts.

You will also need to apply some formatting to the number to make sure the number of seconds is zero padded (i.e. always two digits) and the hundredths have a trailing zero added.

By the way, decrementing a count every time your function is called will not make an accurate timer. Although you set the interval to 10ms, there is no guarantee the function will be called exactly every 10ms, so your timer will drift, especially if there are other scripts on the page. What you should do is record the time at the start of the loop, and calculate the difference between that fixed time and the current time every time the function is called. This is guaranteed not to drift.

Ophiology

Thanks for the tip! I added a monospace font, and it seemed to introduced a new problem: jsfiddle.net/oneeezy/3CreM/3 ,,, There is now a number in the middle that continuously "blinks" – Broncobuster

This is because counts that divide by 10, 100, or 1000 have their trailing zeros removed e.g. 51.10 -> 51.1, 51.00 -> 51 etc. You need to do some formatting of the number as a string. There are many answers on stackoverflow that can help you with that. – Ophiology

Answer 2

Google Chrome tells you your issue's solution if you know how to look. Click your jsFiddle link in Chrome, right-click and inspect element, go to the console tab. In the console tab you'll see

Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)......[etc.]

Taking Chrome's suggestion:

http://jsfiddle.net/3CreM/5/

Code changes:

.timer { width: 180px; display: inline-block; position: absolute; left: 1em; text-align: right; }

To ->

.timer { width: 180dppx; display: inline-block; position: absolute; left: 1em; text-align: right; }

Adding "dp" to the width's value (180px -> 180dppx) it changes how the browser measures pixels. For more info check out this stack question.

Forta

Amazing! thanks for that awesome tip! I've always seen that in the console but didn't really know what it meant. – Broncobuster