Progress Tracker -asp.net web pages

Question

I need to track the progress of certain steps and inform the user what step they are at and what is left to do . I was looking for somehthing like this :

http://www.wpthemesplugin.com/wp-content/uploads/2010/10/43.jpg

(but with different labels of course) but cant seem to see how to acomplish this , i'm not a front end web designer so wouldnt be a dab hand at creating images or anything like that , so preferably i would like to achive this out fancy images if possible , any ideas ? Any help would be appreciated ...

Ali

Answer 1

Here is the simpliest implementation based on slightly modified Pure CSS by Stephen A Thomas:

CSS

ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type none;
}

ol.progtrckr li {
    display: inline-block;
    text-align: center;
    line-height: 3em;
}

ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

ol.progtrckr li.progtrckr-done {
    color: black;
    border-bottom: 4px solid yellowgreen;
}

ol.progtrckr li.progtrckr-todo {
    color: silver; 
    border-bottom: 4px solid silver;
}

ol.progtrckr li.progtrckr-current {
    color: black; 
    border-bottom: 4px solid #A16BBE;
}

ol.progtrckr li:after {
    content: "\00a0\00a0";
}

ol.progtrckr li:before {
    position: relative;
    bottom: -2.5em;
    float: left;
    left: 50%;
    line-height: 1em;
}

ol.progtrckr li.progtrckr-done:before {
    content: "\2714";
    color: white;
    background-color: yellowgreen;
    height: 1.2em;
    width: 1.2em;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
}

ol.progtrckr li.progtrckr-todo:before {
    content: "\039F";
    color: silver;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.6em;
}

ol.progtrckr li.progtrckr-current:before {
    content: "\039F";
    color: #A16BBE;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.6em;
}

ASPX

<asp:BulletedList CssClass="progtrckr" ID="ProgressTracker" runat="server" 
    BulletStyle="Numbered">
</asp:BulletedList>

Code

protected void AddSteps(params string[] items)
{
    ProgressTracker.Items.Clear();
    ProgressTracker.Attributes["data-progtrckr-steps"] = items.Length.ToString();

    for (int i = 0; i < items.Length; i++)
    {
        ProgressTracker.Items.Add(new ListItem(items[i]));
    }
}

protected void SetProgress(int current)
{
    for (int i = 0; i < ProgressTracker.Items.Count; i++)
    {
        ProgressTracker.Items[i].Attributes["class"] = 
            (i < current) ? "progtrckr-done" : 
            (i == current) ? "progtrckr-current" : "progtrckr-todo";
    }
}

How to use

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // initialize steps
        AddSteps("Step 1", "Step 2", "Done");
        SetProgress(0);
    }
}

protected void SubmitButton_Click(object sender, EventArgs e)
{
    SetProgress(1);
}

The other one nice CSS for it: Simple, CSS only wizard progress tracker

Answer 2

You don't need to buy one nor create it.

Folks at JQuery already implemented and you can have it working for free. Look at this site to see a demo and here to see how to get it working.

I have personally used this plugin with no problem.