Question

I’ve been Googling for about an hour or so trying to find a jquery control that would come close to what I’m trying to do (or a control that I could tweak), but couldn’t find any.

Perhaps anyone could share a link or might propose a different approach.
I’m trying to achieve the following:

I have a web site that targets dealers (not the general public). Each dealer has a predefined money target. For example, dealer A has a 59K target. Dealer B has a 21K target.
In addition, we currently have 3 rules.

• If 2% of the customer’s target has been reached, we offer 20%
  discount.
• If 4% of the customer’s target has been reached, we offer 40%
  discount.
• If 6% of the customer’s target has been reached, we offer 60%
  discount.

I’m trying to find some sort of progress bar that would show the 3 rules in addition to the current amount the user is at. Example:

——8K—————-|——————|————————|

              20%         40%            60%

The 8K represents the current amount the current logged in dealer has.
Another example (for a different logged in dealer) might be:

———————|——-27K———–|————————|

            20%           40%             60%

How would one create (or tweak) such a control?
Thanks

Answer 1

Try something like this: Live Demo

HTML

<div id="main" >
    <div id="first">20%</div><div id="second">40%</div><div id="third">60%</div>

    <div id="cur">12000</div>
</div>

CSS

#main {
    width:400px;
    height:60px;
    border:1px solid black;
}

#first,#second,#third {
    display:inline-block;
    position: relative;
    left: 0%;
    top:0%;
    height:100%;
    text-align:right;
    font:Courier;
    color:#fff;
    font-size:90%;
    padding-right:4px;
}

#first {
    background: #800;
    width:20%;
}

#second {
    background: #880;
    width:20%;
}

#third {
    background: #080;
    width:20%;
}

#cur {
    display:block;
    float:left;
    position: relative;
    left: 0%;
    top:-65%;
    height:30%;
    width:40%;
    border:1px solid blue;
    background: #fff;
    text-align:right;
    font-family: Courier;
    font-weight:bold;
    padding-right: 4px;
}

jQuery

$(document).ready(function() {
    function showBar(target, current) {
        perc = current / target * 100;

        console.log(perc);

        l = perc * 4;

        console.log(l);

        $("#cur").css('width', perc + '%');
        $("#cur").text(current);
    }

    showBar(12000, 6000);
});

Just call showBar with the target value and current value.