How Can I Stop a Progress Bar at 100%, When Donations Exceed That Amount?

Question

This maybe more of a PHP solve, but the website is in ExpressionEngine. I'm using a Matrix field, Store to process donations, and reverse relationships.

I basically set-up a progress bar using some PHP to showcase how much funds were raised for a youth. This works well, but assumed that people wouldn't continue to give if the record had hit 100% funded (really bad assumption, but it was only suppose to be a demonstration site, not a final product).

What's happening is that there are a couple of records that have been funded over 100%. I'm trying to figure out what would be a method to (1) trap the progress bar, so it never extends more than 100% width and (2) remove the give button if/when the raised amount equals 100% or more. I don't really care about someone giving $100 when the individual raising funds only needed $25 to be successful. I'm more concern to not not allow or at least make easy future donations after they've reached or exceeded 100% funding.

<div class="need-status">
    <hr class="none" />
    <div class="progress"><div class='value' style='width: <?=fixFloat($progress)?>%'><?=fixFloat($progress)?></div></div>
    <p class="stat money">$<?=fixFloat($total_given)?> of $<?=fixFloat($total_need)?> (<?=fixFloat(number_format($progress, 1, '.', ''))?>%)</p>
    <p><strong><?=fixFloat($total_donors)?></strong> supporters &nbsp;<strong>Appeal Ends:</strong> {reverse_related_entries channel="appeals" status="open" orderby="date" sort="desc" limit="1"}{appeal_end_date format="%d %M %Y"}{/reverse_related_entries}</p>

    </div><!-- end Progress View -->

    <!-- start Needs View -->
    {reverse_related_entries channel="appeals" status="open" orderby="date" sort="desc" limit="1"}
    {embed="youth/_needs" entry_id="{entry_id}"}
    {/reverse_related_entries}
    <!-- end Needs View -->

I figured, it might be possible to encase the Store give button, in an id tag that shows/hide based on the outcome of progress details, but that's assuming I can set the progress bar to exactly 100% even if the amount is 130%, which I'm not certain how to do. The PHP variables are set in another portion of the page.

My PHP skills just aren't that great. The youth needs are stored in a Matrix field.

Answer 1

Try this:

<?=fixFloat($progress) <= 100 ? fixFloat($progress) : 100?>

That code says: "if fixFloat($progress) is less or equal to 100, then output fixFloat($progress), otherwise output 100".

Updated by Nonprofit Tech: I used both @Justin's and @GDMac's response. For the progress bar, I added the max-width: 100%; to the inline style. But the solution for hiding the give button was in @Justin's code. I used like:

<div id="display_<?=fixFloat($progress) <= 100 ? fixFloat($progress) : 100?>">

Then added the following to my stylesheet

#display_100 {
    display: none;
}

This hides the give button when the give amount is 100% or over, but otherwise displays it for all the other randomly generated ids such as 46% or 89%. Thanks much!!