Question

I am new to jquery, with some basic understanding.

I am trying to use the jOdometer.js https://github.com/jesucarr/jodometer . I can get the odometer well and good, and the default setInterval method makes the odometer tick.

There is a section of the code

function advanceCounter() {
            setNumbers(counter);
            counter = counter + settings.increment; // increment the number 
            // if we reach the end clear the interval and use the ending number
            if(settings.counterEnd != false && counter >= settings.counterEnd){
                clearInterval(counterInterval);
                setNumbers(settings.counterEnd);
            }
        }
        // to move the colums from one number position to another
        function setNumbers(counter){
            digits = String(counter).split('.'); // check decimals
            // if we where using decimals
            if (decimalsArray.length > 0){
                // for each decimal digit, update the old digit position to the new
                for (i=0;i<decimalsArray.length;i++){
                    oldDigit = decimalsArray[i];
                    // the new numer could have not decimal part, but we need it anyway
                    if (digits[1]){
                        decimalsArray[i] = digits[1].charAt(i);
                    }
                    if (decimalsArray[i] == ''){
                        decimalsArray[i] = '0';
                    }
                    updatePosition($('.jodometer_decimal_'+i, scope), parseInt(decimalsArray[i]), parseInt(oldDigit));
                }
            }

            integers = digits[0];
            j=integers.length-1;
            // for each integer digit, update the old digit position to the new
            for (i=0;i<integersArray.length;i++){
                oldDigit = integersArray[i];
                integersArray[i] = integers.charAt(j);
                if (integersArray[i] == ''){
                    integersArray[i] = '0';
                }
                //alert($(this));
                updatePosition($('.jodometer_integer_'+i, scope), parseInt(integersArray[i]), parseInt(oldDigit));
                j--;
            }
        }
        // changes the column position from one number to another
        function updatePosition(col, newDigit, oldDigit){
            if(newDigit != oldDigit){
                col.stop();
                // if the number is 0 use the bottom 0 in the image, and change intantly to the top 0
                if (newDigit == 0){
                    col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing).animate({top: zeroSet},1, 'linear');
                }else{
                    // if the new number is lower than the old, we have to go to the bottom 0 and start from the top 0, with the apropiate speed, to don't note the jump
                    if (newDigit < oldDigit){
                        col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed*((10-oldDigit)/10), 'linear').animate({top: zeroSet},1, 'linear').animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed*oldDigit/10, settings.easing);
                    }else{
                        col.animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing);
                    }
                }
            }
        }

which updates the odometer. I am using ajax to get new data, and I want to update the odometer readings. How can I call advanceCounter() or setNumbers() from my webpage, to update the odometer?

Help.

Here is a demo of the actual plugin (from the author himself). http://www.frontendmatters.com/demos/jodometer/

Answer 1

It looks like you could just set it when you get new data like this:

function updateTimer(newVal)
{
    $(".myCounter").jOdometer({ counterStart: newVal, counterEnd:newVal, numbersImage: 'images/jodometer-numbers.png'});
}

I’m not sure what you would want the increment to be, if any, but this should do the trick.

Update:

Here it is with the built-in animation.

Open up your jquery.jodometer.js file.
Look at line 100 (right below the function ‘advanceCounter()’) and add this:

$.fn.Advance = function(newVal)
{
    setNumbers(newVal);
}

Now you can increment the counter by doing:

$("#MyCounterDiv").Advance(150); //150  whatever new value you want.

Update 2:

I was only testing with one counter. aVC pointed out that only the last counter initialized will be affected.
Here’s how I worked around that:

Replace the setNumbers function with this:

function setNumbers(counter, elem){
    digits = String(counter).split('.'); // check decimals
    // if we where using decimals
    if (decimalsArray.length > 0){
        // for each decimal digit, update the old digit position to the new
        for (i=0;i<decimalsArray.length;i++){
            oldDigit = decimalsArray[i];
            // the new numer could have not decimal part, but we need it anyway
            if (digits[1]){
                decimalsArray[i] = digits[1].charAt(i);
            }
            if (decimalsArray[i] == ''){
                decimalsArray[i] = '0';
            }
            var theScope = (elem) ? elem : scope;
            console.log(theScope);
            updatePosition($('.jodometer_decimal_'+i, theScope), parseInt(decimalsArray[i]), parseInt(oldDigit));
        }
    }

    integers = digits[0];
    j=integers.length-1;
    // for each integer digit, update the old digit position to the new
    for (i=0;i<integersArray.length;i++){
        oldDigit = integersArray[i];
        integersArray[i] = integers.charAt(j);
        if (integersArray[i] == ''){
            integersArray[i] = '0';
        }
        var theScope = (elem) ? elem : scope;
        console.log(theScope);
        updatePosition($('.jodometer_integer_'+i, theScope), parseInt(integersArray[i]), parseInt(oldDigit));
        j--;
    }
}

I added another parameter “elem” which will be passed in the Advance function we added earlier. Just need to change the $.fn.Advance function to this:

$.fn.Advance = function(newVal)
{
    setNumbers(newVal, $(this));
}

Finally, I found that for some reason I needed to remove an if statement from the updatePosition function. This if statement figures out if you’re trying to tell it to ‘change’ to the same number. It breaks because it checks the wrong counter’s settings. We could work around this if it’s important, but I just decided to comment it out 😛

function updatePosition(col, newDigit, oldDigit){
    //if(newDigit != oldDigit){
        col.stop();
        // if the number is 0 use the bottom 0 in the image, and change intantly to the top 0
        if (newDigit == 0){
            col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing).animate({top: zeroSet},1, 'linear');
        }else{
            // if the new number is lower than the old, we have to go to the bottom 0 and start from the top 0, with the apropiate speed, to don't note the jump
            if (newDigit < oldDigit){
                col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed*((10-oldDigit)/10), 'linear').animate({top: zeroSet},1, 'linear').animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed*oldDigit/10, settings.easing);
            }else{
                col.animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing);
            }
        }
    //}
}