Allow participant & team thermometers to surpass 100%

Options
Does anyone know if there is a way to allow thermometers on participant and team profile pages to surpass 100%?  So if the participant surpasses their goal, the theremometer wouldn't stop at 100% but continue going (eg 110% 120%, etc).


Thanks,


Meghan
Tagged:

Comments

  • You can make anything you want with some HTML, CSS and S-Tags.


    The trick is knowing you can do math with E130.


    Here's a thread I just fixed: https://community.blackbaud.com/forums/viewtopic/1/961?post_id=92605#p92605


    Though mine deliberately prevents what you want, it might give you some ideas.


    For instance, you could style the bar color with a conditional.


    [[?

    [[E130:[[S48:1520:pct-of-goal]] 1 max 99 min]]

    ::99::

    RED

    ::

    BLUE

    ]]


    So whenever they hit 99 (the max value) the bar turns red.


    Or you could manually compute the percent-of-goal - but use Goal+200.


    [[E130:[[E130:[[S42:0:dollars]] [[E130:[[S42:0:goal]] 200 +]] /]] 100 * int 1 max 99 min]]%


    So this gives you a thermo that goes $200 over the configured goal. Combine that with the style conditional, and it turns red at goal, yet the bar keeps going.
  • Thank you for the information - this is great.


    Where exaclty does the code for the thermometer go?
  • That depends entirely on the design.


    One variation of the themometer even appears in our Teamraiser stationary in a sidebar along with other information from their participant center.


    For Teamraiser you might put it in the Pagewrapper so that it appears on every page, or you might put it in the Greeting page so that it only appears on the home page.


    It really depends on your design, how it was coded, and where you want it to appear.
  • We are looking to just put it up on the participant and team profile pages.
  • You can use the Page Footer (Non User Editable) on the Default Personal and Default Team Pages. We use this spot to make this right sidebar.


    That will get the code on the page, though it may not be quite where you want it. You might need to absolute position it, or use Jquery to move the block elsewhere in the DOM.


    Alternately, you can still use the PageWrapper, and just wrap the block of code in an S-Tag conditional. You can use S8 (the current URL) to figure out what page you are on.
  • Thank you!

Categories