Javascript functions returning unusable value

Oliver Yasuna

So I'm trying to get a percentage of a value between two numbers.

Here's my code:

var easeMethod = 'easeOutCubic';        // Mathematical curve.
var easeTime = 1250;                    // In milliseconds.
var easeTime_Fill = easeTime + 500;     // Extra time for fills.

function clip(value, min, max)
{
    //var valueInBoundaries = Math.max(valueMin, Math.min(value, valueMax));

    if(value < min) value = min;
    if(value > max) value = max;

    return value;
}

function rangePercentage(value, min, max)
{
    value = clip(value, min, max);

    return ((value - min) * 100) / (max - min);
}

$('.fill').each(function()
{
    var valueMin = $(this).attr('data-valueMin');
    var valueMax = $(this).attr('data-valueMax');
    var value = $(this).attr('data-value');

    if(typeof value !== typeof undefined && value !== false)
    {
        if(typeof valueMin == typeof undefined || valueMin == false) valueMin = "0";
        if(typeof valueMax == typeof undefined || valueMax == false) valueMax = "100";

        var percentage = rangePercentage(value, valueMin, valueMax);

        $(this).animate({
            width: percentage + "%"
        }, easeTime_Fill, easeMethod);
    }
});

For some reason it won't work. When I do an alert it gives me the right percentage, but when I plug it into the JQuery function, nada, as if it was 0.

Thomas

Your clipping-method still has errors, therefore it converts every value < max to max.

function clip(value, min, max){
    //this version may behave weird if you don't pass in numbers
    //so you have to take care of the types!
    //but to me it's more readable than the min-max-version
    return value > min? value < max? value: max: min;

    //this will convert everything to numbers
    return Math.max(min, Math.min(max, value));
}

function rangePercentage(value, min, max){
    //the subtractions convert all inputs to numbers.
    //therefore this version is a bit more tolerant than clipping the value,
    //because we can ensure that we always pass numbers to clip()
    return clip( (value - min) / (max - min) * 100, 0, 100 );
}

$('.fill').each(function(){
    //don't do the same task over and over again, if you don't have to
    var $this = $(this);

    //the `+` converts everything to numbers.*
    //but it's not very flexible when dealing with leading whitespace
    //in such cases you might want to use parseFloat() instead, 
    //or trim() the string first.
    var valueMin = +$this.attr('data-valueMin');
    var valueMax = +$this.attr('data-valueMax');
    var value = +$this.attr('data-value');

    //better check wether you actually have a number, instead of
    //this big bulk of condition wich still doesn't ensure you valid inputs
    if(!isNaN(value)){
        if(isNaN(valueMin)) valueMin = 0;
        if(isNaN(valueMax)) valueMax = 100;

        var percentage = rangePercentage(value, valueMin, valueMax);
        $(this).animate({
            width: percentage + "%"
        }, easeTime_Fill, easeMethod);
    }
});

the + converts everything to numbers, but it's not very flexible when dealing with leading whitespace in such cases you might want to use parseFloat() instead, or trim() the string first.

just for conveniance

//to convert everything to numbers, converts NaN's to 0.
function number(value){ return +value || 0 }
function int(value){ return value | 0 } //only last 32 bits (sign + 31 bits)
function uint(value){ return value >>> 0 }  //last 32 bits

Collected from the Internet

Please contact [email protected] to delete if infringement.