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}"}
    <!-- 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.


1 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!!

  • 1
    or a simple max-width in the css: <div class="value" style="width: 130%; max-width:100%;">130</div>
    – GDmac
    Commented Dec 18, 2012 at 18:48
  • That works too. I guess I got hung up on the "PHP" portion rather than use CSS. Commented Dec 18, 2012 at 18:49
  • the php is more broken-browser proof i think.
    – GDmac
    Commented Dec 18, 2012 at 18:53
  • Excellent. Thanks, Guys, I used both. I'm editing the answer, to include my use of both. Commented Dec 18, 2012 at 19:17
  • 1
    I love StackExchange for this, with my PHP skills, I could have spent more than an hour playing around trying to get something that worked. I admit to trying the max-width, but had placed it on the wrong tag. I put it on the .progress class instead of the .value class. Commented Dec 18, 2012 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.