Build Step Progress Bar (css and jquery)

Question

You\'ve seen iterations of this type of progress bar on sites like paypal. Ho

Answer 1

This is what I did:

1. Create jQuery .progressbar() to load a div into a progress bar.
2. Create the step title on the bottom of the progress bar. Position them with CSS.
3. Then I create function in jQuery that change the value of the progressbar everytime user move on to next step.

HTML

    Step 1 Step 2 Step 3

CSS

#divProgress
{
    width: 600px;
}

#divStepTitle
{
    width: 600px;
}

.spanStep
{
    text-align: center;
    width: 200px;
}

Javascript/jQuery

var progress = 0;

$(function({
    //set step progress bar
    $("#divProgress").progressbar();

    //event handler for prev and next button
    $("#btnPrev, #btnNext").click(function(){
        step($(this));
    });
});

function step(obj)
{
    //switch to prev/next page
    if (obj.val() == "Prev")
    {
        //set new value for progress bar
        progress -= 20;
        $("#divProgress").progressbar({ value: progress });

        //do extra step for showing previous page
    }
    else if (obj.val() == "Next")
    {
        //set new value for progress bar
        progress += 20;
        $("#divProgress").progressbar({ value: progress });

        //do extra step for showing next page
    }
}