Question

I need to take a percentage value, convert it to pixels and move a div upwards using JQuery animate for a progress bar I’m trying to build. The div containing the graphic that needs to move upwards has a 268 pixel height (so that is our 100%).

as an example, I put 38% as the starting percentage value that I need to convert to a pixel value and move div with the id prog_anim to that number of pixels upwards (should be around 101 pixels)

var result = 38 / 100 * 268;
function bgr_animate(result) {
    $('#prog_anim').animate({
    'marginTop' : result
    });
}

and then I have the following link on a button that performs the action:

a href="javascript:;" onclick="bgr_animate(result)"

being a total Javascript noob I have no idea where the above syntax is wrong. Can anyone correct me here? Thanks!

Answer 1

Try this:

function bgr_animate(percent, height) {
    var pixels = percent / 100 * height;
    $('#prog_anim').animate({
        'marginTop' : pixels
    });
}

And your button;

<a href="javascript:;" onclick="bgr_animate(30, 268)">