Customize progress bar?

Bill Bennett

Is it possible to replace the default gif images used in the donation form progress bar to indicate where you are in the submission process with custom ones (e.g., bullet_progress_bar_1.gif)? The defaults, at least in our installation, are not properly aliased and rather crude looking. I'd just as soon not get into using the API over something as trivial as this but I can't find any way to swap some decent looking ones in.

Michael

You can use JavaScript to search/replace the image with a new src. If you use a JavaScript library (like ProtoType or JQuery) this script is much easier, below, though is a core JavaScript version that can do it. Since that image has no ID attribute, you have to brute force it a bit. Make sure to paste the snippet somewhere BELOW the progress bar in the HTML, it only looks for img elements that have been rendered at the point the script runs and it's not programmed to wait until the page is fully rendered. Stick this in the footer somewhere of your page wrapper, or use an HTML caption item in your form.

<script type="text/javascript">

var arrImages = document.getElementsByTagName("IMG");

/*

This is the path to the one on CARE's site -- we don't actually use the progress bar though...

Make sure to use absolute paths not relative ones for the search, that's how JavaScript

sees the images source strings. You can use relative paths for the replacement images though,

like to an image library image: i.e "../images/content/pagebuilder/11545.gif" or you can

use an absolute path to whatever image you want.

*/

var imageToBeReplaced = "https://PUT.YOUR.HOSTNAME.HERE/images/bullet_progress_bar_1.gif"

var replacementImage = "../path/to/REPLACEMENT.gif";

for(var i=0;(i<arrImages.length); i++){

if(arrImages+.src== imageToBeReplaced){

arrImages+.src=replacementImage;

i = arrImages.length; //No point in processing any more...

}

}

</script>

David Hart

I think your best bet is to just replace the auto-generated progress bar with HTML components at the top of each page in the donation form.

Michael

DavidHart :

I think your best bet is to just replace the auto-generated progress bar with HTML components at the top of each page in the donation form.

I thought of that, but you can't really do that on the Thank You / Confirmation page, at least, not so as to make it be consisitent throughout the process.

The other thing you could do, I guess, if just replace the image directly via your FTP site. blah. Should have thought of that solution first

Bill Bennett

Michael :

I thought of that, but you can't really do that on the Thank You / Confirmation page, at least, not so as to make it be consisitent throughout the process.

The other thing you could do, I guess, if just replace the image directly via your FTP site. blah. Should have thought of that solution first

Thanks, that certainly seems like the simplest thing. Just have to figure out how I get ftp access to my account--I didn't know that was available.

M OConnell

Figured I will keep this old thread afloat with a very similar customization instead of adding yet another topic to the community...

My question is similar to Bill's above... except in this case I would like to manually change the Progress meter image in a manner that reflects a different Progress % than what is already shown automatically.


To illustrate: i'm updating a donation campaign and already have 10% of my goal met offline and want to merge that into my existing 40% of online donations.  


Problem is, I can't see if there's an option to allow a manual number change; like in TeamRaiser.


My only thought is this needs to be done manually (via JavaScript) by finding the Progress Bar image; append a "manual value" to the existing value of the "&Percent=" parameter and have it update after the DOM loads?

Example: https://secure.americares.org/site/DynImg/progress.jpg?pi=23&percent=40

Ideas? Anyone else deal with this before? (of course you have )


 

Jesse Kelsey

We've done lots of these and tend to customize using html/css/javascript. The only Luminate-specific thing that you would need to render in this case is the amount raised for the given campaign, using an S-tag, like this: [[S15:7301:amountRaised]]   (7301 in this case is the campaign id)


Then, you can add any amount -- a fixed amount or a percentage.


To take it a step further, this is an example of how you would grab the amount generated by the S-tag using HTML and javascript:

HTML:

<div id="persraised">[[S15:7301:amountRaised]]</div>

javascript (using jQuery here, too):

<script type="text/javascript">

var jqs = jQuery.noConflict();

jqs(document).ready(function() {

   var persraisednum = jqs("#persraised").html();

});

</script>

M OConnell

Jesse - can't thank you enough! I had completely overlooked the S15 tag and was going at it with brute force (and wrongly so).

Below is what i constructed around your script.


=========================

Notes:

- be sure to adjust campaign ID per use

- be sure to call in a jQuery library BEFORE this.

- My JavaScript / jQuery isn't the finest/most efficient (designer, not a developer), so there is room for improvement there.

- Included Bootstrap css only to create the Progress meter (who doesn't love their out-of-box meters?) and saves us some time. 

=========================


<link rel="stylesheet" href="https://secure.americares.org/bootstrap/3.3.6/css/bootstrap.min.css">

          <!-- Pulls in essential S tag data -->
          <div id="persraised" style="display:none;">[[S15:6926:percentRaised_formatted]]</div>
           <div id="amtraised" style="display:none;">[[S15:6926:amountRaised]]</div> 
           <div id="amtgoal" style="display:none;">[[S15:6926:goal]]</div>
 
 <script type="text/javascript">
 var jqs = jQuery.noConflict();
 jqs(document).ready(function() {

    // Adjusting Thermometer
    var amtAdjusted = (36266*100); // add the amount of offline change in thermometer, e.g. $36,266
    function format2(n, currency) {
          return currency + " " + n.toFixed(2).replace(/(\\d)(?=(\\d{3})+\\.)/g, "$1,");
        }

    // Calc for New Amount Raised
    var amtraisednum = parseInt(jqs("#amtraised").html(),10);            
    var amtRaisedTotal = ((amtraisednum + amtAdjusted)*.01);
    var RaisedNew = format2(amtRaisedTotal, "$");
               //alert (amtRaisedTotal);
    
    // Calc for New Percent Raised / Goal
    var persraisednum = jqs("#persraised").html();
    var amtGoal = jqs("#amtgoal").html();
    var PercentNew = (Math.floor(((amtRaisedTotal/(amtGoal*.01))*100)) + "%");   
               //alert (PercentNew);

    // All Together Now
    jqs(".AmtRaisedNew").html(RaisedNew);
    jqs(".progress-bar").css("width", PercentNew).attr("aria-valuenow", PercentNew);
    jqs(".progress-bar").html("Raised " + PercentNew + " of Goal! " + RaisedNew);
    jqs(".GoalPercentNew").html(PercentNew);
 });
 </script>


<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Fundraising To Date</h3>
  </div>
  <div class="panel-body">
    <strong>Raised:</strong><span class="AmtRaisedNew">$0</span> <br/>
    <strong>Goal:</strong> [[S15:6926:goal_formatted]] <br/>
    <strong>You've raised</strong> <span class="GoalPercentNew">0%</span> of the Goal! <br/>
  </div>
</div>


<div class="progress">

  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%; max-width:100%;">

    0%

  </div>

</div>