Adapt jQuery progress goal meter to include pending meter

Question

I am trying to adapt the GoalMeter jQuery plugin to include a pending meter that can be displayed alongside the progress meter. I have created a CodePen and made some adaptations that can be viewed here: http://codepen.io/mikehermary/pen/xwEypo

update: function goalMeter_update(options) {
        if (typeof options === "object") {
            this.extendOptions(options);
        }

        // Get ze values
        this.goalAmount = this.getGoalAmount();
        this.progressAmount = this.getProgressAmount();
        this.pendingAmount = this.getPendingAmount();

        // Apply some math to this stuff.
        this.progressPercentageAmount = Math.min(
            Math.round(
                this.progressAmount / this.goalAmount * 1000
            ) / 10, 100
        ); //make sure we have 1 decimal point :)

        // figure out the new width/height
        this.newCSS[ this.isHorizontal ? "width" : "height" ] = this.progressPercentageAmount + "%";

        // render stuff. Yeah.
        this.render();

        // Apply some math to this stuff.
        this.pendingPercentageAmount = Math.min(
            Math.round(
                this.pendingAmount / this.goalAmount * 1000
            ) / 10, 100
        ); //make sure we have 1 decimal point :)

        // figure out the new width/height
        this.newCSS[ this.isHorizontal ? "width" : "height" ] = this.pendingPercentageAmount + "%";

        // render stuff. Yeah.
        this.render();

    },

This is the function that controls the meters and their vertical heights. As you can see in the CodePen example, the pending meter is overriding the donated meter. How can I make each meter independent?

Answer 1

After some minor head scratching and trial and error, I have figured it out. The problem was solved by changing newCSS to progressCSS and pendingCSS for the horizontal or vertical display of the meter, then removing the first this.render function call. After these changes, the meters work and animate independently of each other.

I then figured out the z-indexes for each meter would need to switch, depending on which value was lower. If the progress value was lower, then it would need a higher z-index than pending and vice versa. I have attached the updated function from my previous example to show my changes.

update: function goalMeter_update(options) {
        if (typeof options === "object") {
            this.extendOptions(options);
        }

        // Get the values
        this.goalAmount = this.getGoalAmount();
        this.progressAmount = this.getProgressAmount();
        this.pendingAmount = this.getPendingAmount();

        // Apply some math to this stuff.
        this.progressPercentageAmount = Math.min(
            Math.round(
                this.progressAmount / this.goalAmount * 1000
            ) / 10, 100
        ); //make sure we have 1 decimal point :)

        // figure out the new width/height
        this.progressCSS[ this.isHorizontal ? "width" : "height" ] = this.progressPercentageAmount + "%";

        // Apply some math to this stuff.
        this.pendingPercentageAmount = Math.min(
            Math.round(
                this.pendingAmount / this.goalAmount * 1000
            ) / 10, 100
        ); //make sure we have 1 decimal point :)

        // figure out the new width/height
        this.pendingCSS[ this.isHorizontal ? "width" : "height" ] = this.pendingPercentageAmount + "%";

        // Set the z-index values
        if (this.progressAmount > this.pendingAmount) {
            this.progressCSS[ "z-index" ] = "1";
        }
        if (this.progressAmount < this.pendingAmount) {
            this.pendingCSS[ "z-index" ] = "1";
        }

        // render stuff. Yeah.
        this.render();

    },

I hope this may be helpful to anyone looking to achieve the same results with this plugin or jQuery in general.